2

我正在尝试使用一个带有 jQ​​uery 的复选框来检查多个复选框。我知道如何检查所有复选框或检查多个复选框是否有 ID。不过，我希望能够做到这一点。

我所有的复选框都在一个类似的分组中。我以一致的方式将它们分组。

我有我的工作在这里小提琴。

这是我的代码

window.onCheck = function () {
var totals = [0, 0, 0];
$('tr.checkRow').each(function () {
    var $row = $(this);
    if ($row.children('td:first').find('input:checkbox').prop('checked')) {
        $(this).find('td.imageBox').each(function (index) {
            var $imageBox = $(this);
            if ($imageBox.children('img:first').attr('src').indexOf('yes') >= 0) {
                ++(totals[index]);
            }
        });
    }
});

$('#total1').text(totals[0]);
$('#total2').text(totals[1]);
$('#total3').text(totals[2]);
};
window.onCheckForm = function (cb) {
var $cb = $(cb);
var $table = $cb.parents("table");
$('input.subFieldCheck').find($table).prop('checked', function () { return cb.prop('checked')});

}

我的问题是 onCheckForm 函数。

谢谢你。

4

2 回答 2

2

注意：我开始为这个问题的副本写这个答案，并意识到我不能发布这个，所以我把它贴在这里。在这个答案中，表结构不同并且简化了很多。

让我们从一个带有复选框列的非常简单的表格开始：

<table>
    <thead>
        <tr>
            <th scope='col' id='toggler'>
                <input type='checkbox' id='toggleAll'>
                <label for='toggleAll'>Select all</label>
            </th>
            <th scope='col'>A column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
        <tr>
            <td headers='toggler'>
                <input type='checkbox'>
            </td>
            <td>some cell data</td>
        </tr>
    </tbody>
</table>

在这里，我在标题中有一个复选框以及一个用于可访问性目的的标签（如果您愿意，您可以隐藏标签）。

我还为标题单元格提供了一个 ID，并为元素使用了headers属性。这对于我们正在做的事情并不是绝对必要的，但是使用该属性td似乎是一个合适的情况。headers如果您想将复选框移动到某些行的另一列，您只需将headers属性添加到该单元格即可。

下面是一些 JavaScript 代码：

$('#toggleAll').change(function () {
    $('td[headers~="toggler"] >  input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

我们将一个函数绑定到change标题中的复选框的事件。

选择器将在属性中以空格分隔的标记列表中查找作为td包含 ID的元素的子元素的所有复选框。togglerheaders

该.prop()方法设置复选框的checked属性以匹配checked标题中的复选框（“this”）的属性值。

我们的基本功能在这里完成。

不过，我们可以通过更改顶部复选框的状态以匹配行中复选框的状态来进行改进。

标题复选框的状态应为：

  • 如果选中 0，则未选中
  • 确定是否检查 (0, n)
  • 已检查 是否n已检查

其中n表示所有复选框。

为此，我们将一个函数绑定到change表行中每个框的事件：

$('td[headers~="toggler"] > input[type="checkbox"]').change(function() {
    var allChecked = true, noneChecked = true;
    var headerCheckbox = $('#toggleAll');

    $('td[headers~="toggler"] > input[type="checkbox"]').each(function(i, domElement) {
        if(domElement.checked) {
            // at least one is checked
            noneChecked = false;
        } else {
            // at least one is unchecked
            allChecked = false;
        }
    });

    if(allChecked) {
        headerCheckbox.prop('checked', true);
        headerCheckbox.prop('indeterminate', false);
    } else if (noneChecked) {
        headerCheckbox.prop('checked', false);
        headerCheckbox.prop('indeterminate', false);
    } else {
        headerCheckbox.prop('indeterminate', true);
    }
});

我在.each()这里使用循环遍历所有适当的复选框，以确定是否选中了全部、无或某些。

请参阅jsFiddle 演示。

希望这会有所帮助，我在回答问题时确实学到了很多东西！

于 2013-08-16T06:11:32.603 回答
1

请参阅此小提琴以获得更清洁的方式：

http://jsfiddle.net/W75dy/19/

<td class="field">
    <form class="fieldCheck">
        <input type="checkbox" id="Row1Chk" name="Row1" value="Row1" />
    </form> Programs
</td>

$('#Row1Chk').on('change', function(event) {
    $('table.checkTable input[type=checkbox]').prop('checked', $(this).prop('checked'));
});
于 2013-04-12T19:53:23.403 回答