Question

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

enter image description here

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

我通常会有一些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完成我需要的工作，但是随着行和列的大小增加，有没有人知道我可以在我的复选框中添加相同的功能而不需要'n'次复制jQuery代码？

[编辑]

我所包含的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 ”。

[EDIT2]

这是问题的jsfiddle。

[EDIT3]

这是我从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>

Answer 1

如果您可以为左侧2添加其他类row-master，为前2级添加col-master，也可以向其他复选框添加类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)
})

演示：Fiddle

Answer 2

如果自定义属性不是问题，您可以使用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>

然后按其className

定位主复选框

$('.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/

在jQuery中选择All Row或Select All Column

2 个答案: