ASP.net使用C＃

Question

Javascript函數無法使用內容頁面中的復選框檢查和取消選中所有核對表框。 它在沒有母版頁的頁面上工作，但它不在包含母版頁的頁面上工作

 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> <asp:CheckBox ID="checkBox" Text="Buy All" Font-Bold="true" runat="server" /> <asp:CheckBoxList ID="checkBoxList" TextAlign="Right" runat="server"> <asp:ListItem Enabled="true" Value="Driver_Steering">Steering</asp:ListItem> <asp:ListItem Value="Driver_Body">Body</asp:ListItem> <asp:ListItem Value="Driver_Reflectors">Reflectors</asp:ListItem> <asp:ListItem Value="Driver_Horn">Horn</asp:ListItem> <asp:ListItem Value="Driver_Leaks">Leaks</asp:ListItem> <asp:ListItem Value="Driver_Ammeter">Ammeter</asp:ListItem> <asp:ListItem Value="Driver_Transmission">Transmission</asp:ListItem> <asp:ListItem Value="Driver_Tail_Lights">Tail Lights</asp:ListItem> <asp:ListItem Value="Driver_Coupling_Device">Coupling Device</asp:ListItem> <asp:ListItem Value="Driver_Service_Brakes">Service Brakes</asp:ListItem> <asp:ListItem Value="Driver_Glass">Glass</asp:ListItem> <asp:ListItem Value="Driver_Exhaust">Exhaust</asp:ListItem> <asp:ListItem Value="Driver_Other_Items">Other Items</asp:ListItem> <asp:ListItem Value="Driver_Drive_Line">Drive Drive Line</asp:ListItem> <asp:ListItem Value="Driver_Clutch">Clutch</asp:ListItem> <asp:ListItem Value="Driver_Speedometer">Speedometer</asp:ListItem> </asp:CheckBoxList> </asp:Content> 

 <script type="text/javascript"> $(document).ready(function () { $('#checkBox').click(function () { if ($(this).is(":checked")) { $('[id *= checkBoxList]').find('input[type="checkbox"]').each(function () { $(this).prop("checked", true); }); } else { $('[id *= checkBoxList]'). find('input[type="checkbox"]') .each(function () { $(this). prop("checked", false); }); } }); }); </script> 

Answer 1

您可以將CssClass屬性添加到CheckBoxList並在jQuery選擇器中使用它，請參閱以下內容：

<asp:CheckBox ID="checkBox"
              CssClass="chkboxList"  <-- Add CssClass attribute
              Text="Buy All"
              Font-Bold="true"
              runat="server" />

呈現的頁面應如下所示：

 $('#checkBox').click(function () { $(".myClass").prop('checked', $(this).is(":checked")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="checkBox" type="checkbox">Buy All<br/> <input class="myClass" type="checkbox">1<br/> <input class="myClass" type="checkbox">2 

我希望它可以幫助你，再見。

Answer 2

使用ClientID

$('#' + '<%= checkBox.ClientID %>').click(function () {
 if ($(this).is(":checked")) {
                $('[id *= checkBoxList]').find('input[type="checkbox"]').each(function () {
                    $(this).prop("checked", true);
                });
            }
            else {
                $('[id *= checkBoxList]').  find('input[type="checkbox"]')  .each(function () {
                    $(this). prop("checked", false);
                });
            }
});

Answer 3

<div>
    <asp:CheckBox ID="checkBox" Text="Buy All" Font-Bold="true" runat="server" onclick = "CheckAll(this);" />
    <asp:CheckBoxList ID="checkBoxList" TextAlign="Right" runat="server">
        <asp:ListItem Enabled="true" Value="Driver_Steering">Steering</asp:ListItem>
        <asp:ListItem Value="Driver_Body">Body</asp:ListItem>
        <asp:ListItem Value="Driver_Reflectors">Reflectors</asp:ListItem>
        <asp:ListItem Value="Driver_Horn">Horn</asp:ListItem>
        <asp:ListItem Value="Driver_Leaks">Leaks</asp:ListItem>
        <asp:ListItem Value="Driver_Ammeter">Ammeter</asp:ListItem>
        <asp:ListItem Value="Driver_Transmission">Transmission</asp:ListItem>
        <asp:ListItem Value="Driver_Tail_Lights">Tail Lights</asp:ListItem>
        <asp:ListItem Value="Driver_Coupling_Device">Coupling Device</asp:ListItem>
        <asp:ListItem Value="Driver_Service_Brakes">Service Brakes</asp:ListItem>
        <asp:ListItem Value="Driver_Glass">Glass</asp:ListItem>
        <asp:ListItem Value="Driver_Exhaust">Exhaust</asp:ListItem>
        <asp:ListItem Value="Driver_Other_Items">Other Items</asp:ListItem>
        <asp:ListItem Value="Driver_Drive_Line">Drive Drive Line</asp:ListItem>
        <asp:ListItem Value="Driver_Clutch">Clutch</asp:ListItem>
        <asp:ListItem Value="Driver_Speedometer">Speedometer</asp:ListItem>
    </asp:CheckBoxList>
</div>

<script type="text/javascript">
    function CheckAll(obj) {
        var list = document.getElementById("<%=checkBoxList.ClientID%>");
        var chklist = list.getElementsByTagName("input");
        for (var i = 0; i < chklist.length; i++) {
            if (chklist[i].type == "checkbox" && chklist[i] != obj) {
                chklist[i].checked = obj.checked;

            }
        }
    }
</script>