如何使用选择取消全选解决Jquery问题答案

【问题标题】：How to resolve Jquery problem with select deselect all如何使用选择取消全选解决Jquery问题
【发布时间】：2021-01-08 17:20:53
【问题描述】：

我有一些 JQuery 代码在 ASP.Net 网络表单中无法正常工作。有人可以帮我看看我是否在代码中做错了什么吗？我有一个 Checkbox 对象 (chkSelectAll)，用户将单击它来选择或取消全选。然后我有一个复选框列表（chkApplianceFields），我想根据 chkSelectAll 的选中状态选择或取消选择该对象中的所有复选框。我不得不编写这段代码，因为一些现有代码在 Chrome 和 Firefox 中不起作用，但它在 IE 中起作用。所以下面的代码是从头开始尝试使功能跨浏览器兼容的新代码。这是我的代码：

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

代码似乎越过了$(chkAll).on('change' 行。我认为当它到达$(chkApplianceFields).each 部分时会出现问题。如果您发现了什么问题，请告诉我。

编辑：这是我的检查代码：

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

【问题讨论】：

标签： jquery asp.net

【解决方案1】：

一个 ASP.NET Checkboxlist 在 DOM 中呈现为一个 Html 表格元素，并且该 Checkboxlist 的每个复选框都有一个表格行和表格单元格包装器，即。如果不选择表的一些子项，您将无法使用 .each() 迭代 Html 表，因此 .find() 在这里很有用。 -Get-Selected-Text-and-Value-of-CheckBoxList-using-jQuery-in-ASPNet.aspx。您的复选框列表的选择器，即。 Html 表未按预期工作。 var chkApplianceFields = $("#<%= chkApplianceFields.ClientID %>"); 返回隐藏的输入元素，而不是您的 Html 表格元素。您可以在下面我提供的代码中更改为“喜欢”的 jQuery 选择器。

你的 jQuery 几乎是正确的，你只需要在你的 .each() 之前添加一个 .find() ，你也在你的事件之前设置检查的 var 并且它总是将它设置为它当时的值初始化，将其移动到您的事件侦听器中：

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

【讨论】：

我认为它需要稍作调整。我重新编辑了我的帖子并从浏览器发布了检查代码。我确实注意到 chkappliancefields 的类型是隐藏的，而不是复选框。我确实尝试在上面的代码中将类型更改为隐藏，但这也不起作用。你能在我的检查代码中看到任何可以改变你的代码的东西吗？
@David 请查看我的更新答案。这是一个小提琴，所以你可以看到我在更新作品中提供的 jQuery 选择器：(jsfiddle.net/fsq4myj7)

【解决方案2】：

@Ryan 您的回答是正确的，但我需要更改设置选中属性的方式，这可能是因为我的复选框列表是自定义的。所以我会把你的帖子设置为答案。但这是我根据您的帖子编写的新代码。

         $(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");
                }
            });
        });
    })

【讨论】：

很高兴你能成功。为您的努力打了一个 +1。