使用 jquery 在弹出窗口中选择所有复选框列表答案

【问题标题】：Select all checkboxlist in Popup using jquery使用 jquery 在弹出窗口中选择所有复选框列表
【发布时间】：2012-06-14 20:44:48
【问题描述】：

我在 Popup 中有一个复选框列表。我在 jquery 中使用了 selectall checkboxlist items 函数。问题是当我检查全选复选框时，它会选择弹出窗口和网页中的所有复选框列表项。如何使其仅在弹出窗口中选择复选框列表项。我的代码为

 <td>   <div style="text-align: left; margin: auto;">
                    <asp:CheckBox ID="chkSelectReportAll" runat="server" Text="Select All" onclick="checkall()"/>
                    <asp:CheckBoxList ID="chkReportLst" runat="server">
                    </asp:CheckBoxList>
        </div>
 </td>

我的脚本

function checkall() {
   $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').click(
    function () {
     if (document.getElementById('chkReportLst'))                    
   $("INPUT[type='checkbox']").attr('checked', $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').is(':checked'));
            });
        }

有什么建议吗？？

【问题讨论】：

如果你有答案，为什么不标记答案已接受。

标签： jquery asp.net checkbox

【解决方案1】：

为您的 <div> 分配一个 ID，这样您就可以将选择器缩小到其中的输入。

<div id="cntCheckBoxList" style="text-align: left; margin: auto;">
    <asp:CheckBox ID="chkSelectReportAll" runat="server" Text="Select All" onclick="checkall()"/>
    <asp:CheckBoxList ID="chkReportLst" runat="server"></asp:CheckBoxList>
</div>

而选择器变成：

$("#cntCheckBoxList INPUT[type='checkbox']").attr('checked',    $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').is(':checked'));

【讨论】：

【解决方案2】：

当然可以，但在执行此操作之前，您必须在弹出窗口内的复选框中添加 class="popupCheckbox"

jQuery 1.6+

使用新的.prop() 函数：

$(".popupCheckbox").prop("checked", true);
$(".popupCheckbox").prop("checked", false);

jQuery 1.5 及以下

.prop()函数不可用，需要使用.attr()。

选中复选框（通过设置选中属性的值）做

$('.popupCheckbox').attr('checked','checked')

并且对于取消检查（通过完全删除属性）做

$('.popupCheckbox').removeAttr('checked')

【讨论】：

【解决方案3】：

改变这一行

$("INPUT[type='checkbox']").attr('checked',
   $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').is(':checked'));

到

$("#any_parent_in_popup INPUT[type='checkbox']").attr('checked',
       $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').is(':checked'));

用弹出窗口内的任何父元素 ID 替换 #any_parent_in_popup，并包含所有复选框。如果没有，可以考虑加一个。

【讨论】：

【解决方案4】：

function checkall() {
   $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').click(function () {
      $("#chkReportLst INPUT[type='checkbox']").attr('checked', $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').is(':checked'));
   });
}

【讨论】：

【解决方案5】：

目前的问题是，当您使用$("INPUT[type='checkbox']") 选择复选框时，jQuery 正在查看整个页面上的所有复选框，正如您所提到的。

你想要的是属于chkReportLst的所有复选框。

为了可读性，我倾向于将其作为 jQquery 子选择器，使用 .find() 函数。

所以，首先选择您的复选框列表，然后使用 .find() 选择作为该列表子元素的复选框：

$("#chkReportLst").find("INPUT [type='checkbox']").attr('checked', $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').is(':checked'));

【讨论】：