How to resolve Jquery problem with select deselect all

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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);
    });
});

Method 2

@Ryan your answer was correct but I needed to change how I was setting the checked attr which may be due to the fact that my checkboxlist is a custom one. So I will set your post as the answer. But here is my new code based on your post.

         $(document).ready(function(){
        const chkAll =  $("#<%= chkSelectAll.ClientID %>");
        const chkApplianceFields =  $("table[id*=chkApplianceFields]");           
        $(chkAll).on('change', function (e) {
            const checked = $(this).prop('checked');
            $(chkApplianceFields).find('input[type="checkbox"]').each(function () {
                if (checked == true) {
                    $(this).attr("checked", checked);
                }
                else {
                    $(this).removeAttr("checked");
                }
            });
        });
    })


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x