在jQuery中选择所有行或所有列

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

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

我通常有一点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，

[EDIT2]

这里有一个问题的解决方案

[EDIT3]

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

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

$（文档）.ready（函数（）{
$（'.cb主列'）。单击（函数（）{
var isMasterColChecked=this.checked；
var tdMasterPosition=$（this.parent（）.index（）；
var$table=$（this）.closest（'table'）；
$table.find（'td:nth子项（+（tdMasterPosition+1）+'）input.cb子项'）。每个（函数（）{
如果（this.checked！=isMasterColChecked）{
$（this）.prop（'checked'，isMasterColChecked）；
$（this.trigger（'change'）；
}
});
});
$（'.cb主行'）。单击（函数（）{
var isMasterRowChecked=this.checked；
$（this）.closest（'tr'）.find（'input.cb child'）.each（函数（）{
如果（this.checked！=isMasterRowChecked）{
$（this）.prop（'checked'，isMasterRowChecked）；
$（this.trigger（'change'）；
}
});
});
$（'.cb child'）.change（函数（）{
var$tr=$（this）.closest（'tr'）
$tr.find（'input.cb master row'）.prop（'checked'），$tr.find（'input.cb child'）。not（'：checked'）。长度==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:n个子（'+（tdChildPosition+1）+'）；
$ths.find（'input.cb master col'）.prop（'checked'，$tds.find（'input.cb child'）。not（'：checked'）。长度==0）
});
});

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

---

jsiddle:

如果可以为左2添加一个额外的类，如

行主控

，为前2添加

列主控

，还可以将类

子项

添加到其他复选框中

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

---

演示：

是否为行主复选框添加了一个类您可以共享一个示例htmlI我不确定我是否正确理解您的情况，一个小提琴会很棒您可以为左侧2添加一个额外的类，如

行主复选框

，为顶部2添加一个

列主复选框

。。。我认为最好是将我的jQuery封装在一个函数中，并在页面加载时每行/每列调用一次。这就是我所需要的，网格中的每个复选框也需要清除/选择主复选框。我如果有帮助的话，我已经添加了一个带有行为的JSFIDLE。Arun的答案似乎更好，使用它非常接近，我添加了一个JSFIDLE来展示当前行为是如何工作的，在一行中断时执行类似的jQuery以使主复选框取消选中/选择是否容易？+1谢谢，这看起来表现得很完美！你真是一个jQuery神。

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