1

我有一个复选框网格，可以是任意数量的行或列宽（我知道这是一个糟糕的设计，但我们正在复制一个遗留系统）。

在此处输入图像描述

带有淡黄色背景的复选框将选中与其相邻的行或列中的所有复选框。

我通常有一些 jQuery 会为单个复选框列表执行这种操作：

$(document).ready(function () {
    $('.master-checkbox').show();

    $('.master-checkbox').click(function () {
        $('.section-checkbox').prop('checked', this.checked);
    });

    $('.section-checkbox').change(function () {
        var check = ($('.section-checkbox').filter(":checked").length == $('.section-checkbox').length);
        $('.master-checkbox').prop("checked", check);
    });
});

我可以使用上面的代码 4x 来完成我需要的工作，但是随着行和列的大小可能（将）增长，有没有人知道我可以在我的复选框中添加相同的功能而无需复制的一种好方法jQuery代码'n'次？

[编辑]

如果用一列复选框和一个主复选框来做这种事情，我会使用我包含的 jQuery 代码。

目前，我在顶部的复选框中分别指定了“master-sco-0”和“master-sco-1”类，左侧的两个复选框指定了“master-sec-0”类和'master-sec-1'。中间的4个（从左到右，从上到下）'sec-0 sco-0'、'sec-0 sco-1'、'sec-1 sco-0'和'sec-1 sco-1 '。

[编辑2]

这是问题的一个jsfiddle。

[编辑3]

这是我从 Arun 的回答中得出的最终解决方案。我进一步触发了更改事件，以确保列/行主复选框可以对其他列/行主复选框做出更改做出反应：

<script type="text/javascript">
    $(document).ready(function () {
        $('.cb-master-col').click(function () {
            var isMasterColChecked = this.checked;

            var tdMasterPosition = $(this).parent().index();

            var $table = $(this).closest('table');
            $table.find('td:nth-child(' + (tdMasterPosition + 1) + ') input.cb-child').each(function () {
                if (this.checked != isMasterColChecked) {
                    $(this).prop('checked', isMasterColChecked);
                    $(this).trigger('change');
                }
            });
        });

        $('.cb-master-row').click(function () {
            var isMasterRowChecked = this.checked;

            $(this).closest('tr').find('input.cb-child').each(function () {
                if (this.checked != isMasterRowChecked) {
                    $(this).prop('checked', isMasterRowChecked);
                    $(this).trigger('change');
                }
            });
        });

        $('.cb-child').change(function () {
            var $tr = $(this).closest('tr')
            $tr.find('input.cb-master-row').prop('checked', $tr.find('input.cb-child').not(':checked').length == 0);

            var tdChildPosition = $(this).parent().index();

            var $table = $(this).closest('table');
            var $ths = $table.find('thead tr:nth-child(2) th:nth-child(' + (tdChildPosition + 1) + ')');
            var $tds = $table.find('tbody td:nth-child(' + (tdChildPosition + 1) + ')');

            $ths.find('input.cb-master-col').prop('checked', $tds.find('input.cb-child').not(':checked').length == 0)
        });
    });
</script>
4

2 回答 2

2

如果您可以添加一个额外的类row-master，如左 2 和col-master顶部 2 还添加一个类child到其他复选框

$('.col-master').click(function(){
    var idx = $(this).parent().index();
    $('table td:nth-child(' + (idx + 1) + ') input.child').prop('checked', this.checked)
})

$('.row-master').click(function(){
    $(this).closest('tr').find('input.child').prop('checked', this.checked)
});

$('.child').change(function(){
    var $tr = $(this).closest('tr')
    $tr.find('input.row-master').prop('checked', $tr.find('.child').not(':checked').length == 0);

    var idx = $(this).parent().index(), $tds = $('table td:nth-child(' + (idx + 1) + ')');
    $tds.find('input.col-master').prop('checked', $tds.find('input.child').not(':checked').length == 0)
})

演示：小提琴

于 2013-09-18T16:39:18.300 回答
1

如果具有自定义属性不是问题，您可以使用 html5 data-* 属性来存储行/列数，如下所示

<table cellspacing="0">
    <tr>
        <td> ALL</td>
        <td><input type="checkbox" class="col_check" data-col="1" /></td>
        <td><input type="checkbox" class="col_check" data-col="2" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="row_check" data-row="1" /></td>
        <td>
            <input type="checkbox" data-col="1" data-row="1" />
        </td>
        <td>
            <input type="checkbox" data-col="2" data-row="1" />
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="row_check" data-row="2" /></td>
        <td>
            <input type="checkbox" data-col="1" data-row="2" />
        </td>
        <td>
            <input type="checkbox" data-col="2" data-row="2" />
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="row_check" data-row="3" /></td>
        <td>
            <input type="checkbox" data-col="1" data-row="3" />
        </td>
        <td>
            <input type="checkbox" data-col="2" data-row="3" />
        </td>
    </tr>
</table>

然后通过它们的类名定位主复选框

$('.col_check').on('click', function(){
    var colnum = $(this).attr('data-col');
    $('input[data-col='+colnum+']').prop('checked', this.checked);
});

$('.row_check').on('click', function(){
    var rownum = $(this).attr('data-row');
    $('input[data-row='+rownum+']').prop('checked', this.checked);
});

JsFiddle：http: //jsfiddle.net/9GYDS/

于 2013-09-18T16:32:42.617 回答