asp.net - How to resolve Jquery problem with select deselect all

Question

I have some JQuery code that is not working correctly in an ASP.Net webform. Could someone help me and see if I am doing something incorrectly in the code? I have a single Checkbox object (chkSelectAll) that the user will click for Select or Deselect All. Then I have a Checkboxlist (chkApplianceFields) that I want to either select or deselect all checkboxes in that object based on the checked status of chkSelectAll. I am having to write this code because of some existing code not working in Chrome and Firefox but it works in IE. So the below code is new code starting from scratch to try to make the functionality cross-browser compatible. Here is my code:

    <script type="text/javascript">
    $(document).ready(function(){
        var chkAll =  $("#<%= chkSelectAll.ClientID %>");
        var chkApplianceFields =  $("#<%= chkApplianceFields.ClientID %>");
        var checked = $(chkAll).prop("checked");
        $(chkAll).on('change', function(e) {
            $(chkApplianceFields).each(function () {
                $(this).attr("checked", checked);
            });               
        });
    });  
   </script>

The code seems to get past the $(chkAll).on('change' line. I think it is having an issue when it gets to the $(chkApplianceFields).each part. Please let me know if you see something off.

EDIT: Here is my inspect code:

    <div class="first">
                    <input type="hidden" name="ctl00$MainContent$chkApplianceFields$errorInfoStateHiddenField" id="ctl00_MainContent_chkApplianceFields_errorInfoStateHiddenField"><div id="ctl00_MainContent_chkApplianceFields_notificationBorder" class="noErrorModeBorder">
        <table id="ctl00_MainContent_chkApplianceFields_listBox" initialvalue="">
            <tbody><tr>
                <td><input id="ctl00_MainContent_chkApplianceFields_listBox_0" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$0" checked="checked" value="02497881-f0ce-4e2c-bf99-f8cd770bbae8"><label for="ctl00_MainContent_chkApplianceFields_listBox_0">Manufacturer</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_1" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$1" checked="checked" value="08e01c44-4ac9-49f0-bdbc-ffe58ed6780d"><label for="ctl00_MainContent_chkApplianceFields_listBox_1">Brand</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_2" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$2" checked="checked" value="47de2083-9d87-480b-924b-2f5a2ca34dbb"><label for="ctl00_MainContent_chkApplianceFields_listBox_2">Model Number</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_3" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$3" checked="checked" value="44bf4212-7f94-441e-aa54-d2d8e232b0ca"><label for="ctl00_MainContent_chkApplianceFields_listBox_3">Transformer Type</label></td>
            </tr><tr>
                <td><input id="ctl00_MainContent_chkApplianceFields_listBox_4" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$4" checked="checked" value="48c2b6a9-c7f5-4194-9871-a60d261c57a0"><label for="ctl00_MainContent_chkApplianceFields_listBox_4">Phase</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_5" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$5" value="491a69db-acc8-4cdb-8767-73d659f5afcf"><label for="ctl00_MainContent_chkApplianceFields_listBox_5">KVA</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_6" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$6" value="090fcb53-102c-4029-a621-7d36c4ce1f07"><label for="ctl00_MainContent_chkApplianceFields_listBox_6">Output Power</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_7" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$7" value="06b7adb7-073f-48b3-9333-82c1b30b1267"><label for="ctl00_MainContent_chkApplianceFields_listBox_7">Total Loss Power</label></td>
            </tr><tr>
                <td><input id="ctl00_MainContent_chkApplianceFields_listBox_8" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$8" value="9e7c818f-1474-442c-baa5-9ead1c27a4ab"><label for="ctl00_MainContent_chkApplianceFields_listBox_8">Nameplate Efficiency</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_9" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$9" value="2f51eb88-3c17-4d35-901e-0f61571b02c9"><label for="ctl00_MainContent_chkApplianceFields_listBox_9">Efficiency Std</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_10" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$10" value="af65301d-0c84-4b69-b01a-8374e580c036"><label for="ctl00_MainContent_chkApplianceFields_listBox_10">Nameplate Efficiency 2</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_11" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$11" value="423a9dd9-ed27-40ca-a95f-51e19fb66e71"><label for="ctl00_MainContent_chkApplianceFields_listBox_11">Efficiency 2 Std</label></td>
            </tr><tr>
                <td><input id="ctl00_MainContent_chkApplianceFields_listBox_12" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$12" value="caf5d272-e327-42c8-a991-5610e9615554"><label for="ctl00_MainContent_chkApplianceFields_listBox_12">Nameplate Efficiency 3</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_13" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$13" value="7964d3c8-d4e3-4256-9ac3-0651e1b83d7e"><label for="ctl00_MainContent_chkApplianceFields_listBox_13">Efficiency 3 Std</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_14" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$14" checked="checked" value="63da7c1d-f9ab-4869-a480-682a803ad203"><label for="ctl00_MainContent_chkApplianceFields_listBox_14">Regulatory Status</label></td><td><input id="ctl00_MainContent_chkApplianceFields_listBox_15" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$15" checked="checked" value="e591ed34-737c-482b-bae7-76ee456efc76"><label for="ctl00_MainContent_chkApplianceFields_listBox_15">Add Date</label></td>
            </tr><tr>
                <td><input id="ctl00_MainContent_chkApplianceFields_listBox_16" type="checkbox" name="ctl00$MainContent$chkApplianceFields$listBox$16" value="88a6376c-970f-4454-9683-0838dde25351"><label for="ctl00_MainContent_chkApplianceFields_listBox_16">Reference Number</label></td><td></td><td></td><td></td>
            </tr>
        </tbody></table>
    </div>
                </div>

Answer 1

An ASP.NET Checkboxlist is rendered in the DOM as an Html table element and each checkbox of that Checkboxlist has a table row and table cell wrapper, ie. you can't iterate the Html table with .each() without selecting some children of the table, so .find() is useful here. - Get-Selected-Text-and-Value-of-CheckBoxList-using-jQuery-in-ASPNet.aspx. Your selector for your Checkboxlist ie. Html table isn't working as intended. var chkApplianceFields = $("#<%= chkApplianceFields.ClientID %>"); is returning the hidden input element and not your Html table element. You can change to a "like" jQuery selector in my provided code below.

You're jQuery is almost correct, you just need to add a .find() before your .each(), also you are setting the checked var before your event and it will always set it to the value it was at time of initialization, move it inside your event listener:

//This updated selector should get you the table element (Checkboxlist) 
const chkApplianceFields =  $("table[id*=chkApplianceFields]");

$(chkAll).on('change', function(e) {
    //Set checked here, inside of the change event
    const checked = $(this).prop('checked'); 
    $(chkApplianceFields).find('input[type="checkbox"]').each(function () {
         $(this).attr("checked", checked);
    });
});