0

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

我想添加多个使用相同代码的复选框列表。如何在不将其硬编码到 js 的情况下继承客户端 ID（即：getElementById('<%=cbl_list1.ClientID %>')

4

4 回答 4

2

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

$('.myCheckBoxList :checkbox:first').click(function() {
    $(this).siblings().prop('checked', this.checked);
});
于 2013-07-16T18:49:00.650 回答
1

对于多个复选框列表，您可以使用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);
        }
    });
});
于 2013-07-16T18:57:21.993 回答
1

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

通过使用“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);
    });

});
于 2013-07-16T19:25:09.017 回答
0

在此处的一些建议的帮助下，我得以完成这项工作。工作代码是：

       <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>
于 2013-07-16T20:49:36.960 回答