ASP.net使用C＃

Question

Javascript function is not working to check and uncheck all checklist box using checkbox in content page. It works on page without master page but it is not working on page with master page

 <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

You could add the CssClass attribute to the CheckBoxList and use it in jQuery selector, see following please:

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

The rendered page should be like following:

 $('#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 

I hope it helps you, bye.

Answer 2

Use 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>