Question

我有以下代码在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>

我想添加多个使用相同代码的复选框列表。我怎样才能继承客户端ID而不将其硬编码到js中（即：getElementById（'＆lt;％= cbl_list1.ClientID％＆gt;'）

Answer 1

您可以使用this来引用当前元素，就像在代码中一样，并遍历其他元素：

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

Answer 2

对于多个复选框列表，您可以使用each function，这样您就不需要使用id。然后使用checkbox找到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);
        }
    });
});

Answer 3

我写了一篇关于如何解决“检查所有复选框”的blog post。您想使用属性 “已选中”，而不是“已检查”属性。

通过使用“data-”属性和jQuery选择器，您可以将一组复选框绑定到“全选”复选框。然后，您可以根据需要拥有尽可能多的组。此脚本还根据相关复选框组的状态管理检查和取消选中“全选”。

循环复选框（＃i＃是你的变量）：

<input type="checkbox" id="foo_#i#" name="foo" value="#i#" data-select-all="sa_foo" class="checkme" />

“全选”（“data-checkbox-name”指定它控制的命名组）：

<input type="checkbox" id="sa_foo" name="sa_foo" data-checkbox-name="foo" class="selectall" />

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

});

Answer 4

我能够在这里提出一些建议的帮助下完成这项工作。工作代码是：

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

动态JavaScript选择所有CheckBoxList

4 个答案: