动态JavaScript选择所有复选框列表

我有以下代码要执行“在ASP复选框列表中全选”：

    <script type="text/javascript">
        $(document).ready(function () {
            $('.myCheckBoxList :checkbox').eq(0).click(function () {
                var cbl = document.getElementById('<%=cbl_list1.ClientID %>').getElementsByTagName("input");
                // If Checked
                if (this.checked) {
                    for (i = 0; i < cbl.length; i++)
                        cbl[i].checked = true;
                }
                // If Unchecked
                else {
                    for (i = 0; i < cbl.length; i++)
                        cbl[i].checked = false;
                }
            });
        });
    </script>

        <asp:CheckBoxList ID="cbl_list1" runat="server" AppendDataBoundItems="true" CssClass="myCheckBoxList" >
            <asp:ListItem Text="Select All" Value="Select All" />
            <asp:ListItem Text="1" Value="1" />
            <asp:ListItem Text="2" Value="2" />
            <asp:ListItem Text="3" Value="3" />
        </asp:CheckBoxList>

$（文档）.ready（函数（）{
$（'.myCheckBoxList:checkbox'）.eq（0）。单击（函数（）{
var cbl=document.getElementById（“”）.getElementsByTagName（“输入”）；
//如果检查
如果（选中此项）{
对于（i=0；i

---

我想添加多个使用相同代码的复选框列表。如何在不将客户端id硬编码到js中的情况下继承客户端id（即：getElementById（“”）

您可以使用

this

引用当前元素，就像您在代码中所做的那样，并遍历到其他元素：

$('.myCheckBoxList :checkbox:first').click(function() {
    $(this).siblings().prop('checked', this.checked);
});

---

您可以使用

this

引用当前元素，就像您在代码中所做的那样，并遍历到其他元素：

$('.myCheckBoxList :checkbox:first').click(function() {
    $(this).siblings().prop('checked', this.checked);
});

---

对于多个复选框列表，您可以使用

每个函数

，这样您就不需要使用

id

。然后使用

find

查找它的

复选框

元素并更新它们

例如：

$('.myCheckBoxList').each(function() {
    var el = $(this);
    el.find('input[type="checkbox"]:eq(0)').change(function() {
        if (el.prop('checked')) {
            el.find('input[type="checkbox"]').not(':eq(0)').prop('checked', true);
        } else {
            el.find('input[type="checkbox"]').not(':eq(0)').prop('checked', false);
        }
    });
});

---

对于多个复选框列表，您可以使用

每个函数

，这样您就不需要使用

id

。然后使用

find

查找它的

复选框

元素并更新它们

例如：

$('.myCheckBoxList').each(function() {
    var el = $(this);
    el.find('input[type="checkbox"]:eq(0)').change(function() {
        if (el.prop('checked')) {
            el.find('input[type="checkbox"]').not(':eq(0)').prop('checked', true);
        } else {
            el.find('input[type="checkbox"]').not(':eq(0)').prop('checked', false);
        }
    });
});

我已经写了一篇关于如何处理“选中所有复选框”的文章。您想使用属性“checked”，而不是属性“checked”

通过使用“数据-”属性和jQuery选择器，您可以将一组复选框绑定到一个“全选”复选框。然后，您可以拥有任意多个这样的组。此脚本还根据相关复选框组的状态管理“全选”的选中和取消选中

在复选框组上循环（#i#是您的变量）：

全选（“数据复选框名称”指定其控制的命名组）：

JavaScript：

$(document).ready(function(){

    $(':checkbox.selectall').on('click', function(){
        $(':checkbox[name=' + $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
    });
    // Individual checkboxes
    $(':checkbox.checkme').on('click', function(){ // 1

        var _this = $(this); // 2
        var _selectall = _this.prop("checked"); //3

        if ( _selectall ) { // 4
            // 5
            $( ':checkbox[name=' + _this.attr('name') + ']' ).each(function(i){
                // 6
                _selectall = $(this).prop("checked");
                return _selectall; // 7
            });

        }

        // 8
        $(':checkbox[name=' + $(this).data('select-all') + ']').prop("checked", _selectall);
    });

});

我已经写了一篇关于如何处理“选中所有复选框”的文章。您想使用属性“checked”，而不是属性“checked”

通过使用“数据-”属性和jQuery选择器，您可以将一组复选框绑定到一个“全选”复选框。然后，您可以拥有任意多个这样的组。此脚本还根据相关复选框组的状态管理“全选”的选中和取消选中

在复选框组上循环（#i#是您的变量）：

全选（“数据复选框名称”指定其控制的命名组）：

JavaScript：

$(document).ready(function(){

    $(':checkbox.selectall').on('click', function(){
        $(':checkbox[name=' + $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
    });
    // Individual checkboxes
    $(':checkbox.checkme').on('click', function(){ // 1

        var _this = $(this); // 2
        var _selectall = _this.prop("checked"); //3

        if ( _selectall ) { // 4
            // 5
            $( ':checkbox[name=' + _this.attr('name') + ']' ).each(function(i){
                // 6
                _selectall = $(this).prop("checked");
                return _selectall; // 7
            });

        }

        // 8
        $(':checkbox[name=' + $(this).data('select-all') + ']').prop("checked", _selectall);
    });

});

---

在这里的一些建议的帮助下，我能够实现这一点。工作代码是：

       <script type="text/javascript">

            $(document).ready(function () {
                $('.myCheckBoxList').each(function () {
                    $(this).find('input[type=checkbox]:first').addClass("SelectAll");

                $('.SelectAll').click(function () {
                    // If Checked
                    if (this.checked) {
                        $(this).closest('table').find('input[type=checkbox]').prop('checked', true);
                    }
                        // If Unchecked
                    else {
                        $(this).closest('table').find('input[type=checkbox]').prop('checked', false);
                    }
                });
            });
    </script>

$（文档）.ready（函数（）{
$（'.myCheckBoxList'）。每个（函数（）{
$（this）.find（'input[type=checkbox]：first'）.addClass（“SelectAll”）；
$（'.SelectAll'）。单击（函数（）{
//如果检查
如果（选中此项）{
$（this）.closest（'table'）.find（'input[type=checkbox]）.prop（'checked'，true）；
}
//如果不检查
否则{
$（this）.closest（'table'）.find（'input[type=checkbox]）.prop（'checked'，false）；
}
});
});

在这里的一些建议的帮助下，我能够实现这一点。工作代码是：

       <script type="text/javascript">

            $(document).ready(function () {
                $('.myCheckBoxList').each(function () {
                    $(this).find('input[type=checkbox]:first').addClass("SelectAll");

                $('.SelectAll').click(function () {
                    // If Checked
                    if (this.checked) {
                        $(this).closest('table').find('input[type=checkbox]').prop('checked', true);
                    }
                        // If Unchecked
                    else {
                        $(this).closest('table').find('input[type=checkbox]').prop('checked', false);
                    }
                });
            });
    </script>

$（文档）.ready（函数（）{
$（'.myCheckBoxList'）。每个（函数（）{
$（this）.find（'input[type=checkbox]：first'）.addClass（“SelectAll”）；
$（'.SelectAll'）。单击（函数（）{
//如果检查
如果（选中此项）{
$（this）.closest（'table'）.find（'input[type=checkbox]）.prop（'checked'，true）；
}
//如果不检查
否则{
$（this）.closest（'table'）.find（'input[type=checkbox]）.prop（'checked'，false）；
}
});
});

无法使其工作。它的同级是一个标签，而不是所有复选框。无法使其工作。它的同级是一个标签，而不是所有复选框。