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

我正在尝试使用jQuery检查多个复选框。 我知道如何检查所有复选框或检查多个是否有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函数。

谢谢。

Answer 1

看到这个小提琴，以更清洁的方式：

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

  
  
 Programs  $('#Row1Chk').on('change', function(event) { $('table.checkTable input[type=checkbox]').prop('checked', $(this).prop('checked')); }); 

Answer 2

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

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

 
 
 
 
  Select all 
 
A column
 
 
 
 
 
  
 
some cell data
 
 
 
  
 
some cell data
 
 
 
  
 
some cell data
 
 
 
  
 
some cell data
 
 
 
  
 
some cell data
 
 
  

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

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

这是一些JavaScript代码：

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

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

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

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

我们的基本function在这里完成。

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

标题复选框的状态应为：

• 如果选中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()来遍历所有相应的复选框，以确定是否检查了all，none或some。

请参阅jsFiddle演示 。

希望这有所帮助，我肯定在回答这个问题时学到了很多东西！