如何使用 jquery 检查多个复选框而不给每个复选框一个 id？

Posted 2023-03-10

【中文标题】如何使用 jquery 检查多个复选框而不给每个复选框一个 id？

【英文标题】：How do I check multiple checkboxes with jquery without giving each an id?

【发布时间】：2013-04-05 10:48:50

【问题描述】：

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

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

我在小提琴 here 上工作。

这是我的代码

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 函数。

谢谢。

【问题讨论】：

我建议您使用 jQuery 在 javascript 文件中以正确的方式使用事件，而不是在标记中。很乱。

表格元素没有'checked'属性。做 $('input.subFieldCheck').find($table).find('input[type="checkbox"]')...

【参考方案1】：

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

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

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

这是一些 JavaScript 代码：

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

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

选择器将在headers 属性中以空格分隔的标记列表中查找属于td 元素的所有复选框，这些复选框包含ID toggler。

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

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

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

标题复选框的状态应该是：

如果选中 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 demo。

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

【参考方案2】：

查看这个小提琴以获得更清洁的方式：

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'));
);