jQuery：选择（或取消选择）其组内所有其他复选框的复选框

Question

这可能不像标题所说的那么简单。

我通过类将 div 设置为自制复选框（1px 边框，16px 正方形，自定义图形作为应用作为背景图像的复选符号）。单击时，将应用“选中”类。很简单。示例（未选中）：<div class="checkbox group1"> </div>

我还有另一个复选框 (div)，它是“主”，用于选择同一组中的所有其他复选框（本例中为 group1）。这位大师有一个特殊的类叫做'check_all'：<div class="checkbox check_all group1"> </div>

所以你说，“简单；当 'check_all' 被选中时，只需选中 group1 中的所有框。”没那么容易。 check_all 是整个网站的通用类，因此可以在其他页面上重复使用；我也可能将它应用于同一页面上的 group2、group3 等。我需要 jQuery 函数来检查同一组中的所有内容。更复杂的是，组名不是连续的或以任何方式相关的；它们可以是“发票”或“cart_items”或“地址”。

我想到的事情：

1) 清除所有出现的 'checked'、'checkbox' 和 'check_all' 的 master 的 class 属性，并将剩余的字符串用作组名。问题：可能有比仅应用于子复选框的类更多的类。

2) 将“check_all_”附加到组名：“check_all_group1”。问题：jQuery hasclass 似乎不支持通配符来执行“开头”以首先附加处理程序函数。即使是这样，您仍然必须处理类并执行字符串函数才能到达“group1”。看起来笨重且不理想。

3) 将主 div 和所有子 div 放在父容器中。这是我想出的最接近的解决方案，但我不能保证属于其他组的其他复选框也不会出现在容器中。

欢迎重新设计整个概念。我只需要一种简单的方法来放入一个附加到一个函数的可重用类，该函数将选择同一组的所有其他“复选框”元素。

编辑： 该解决方案必须支持跨浏览器（甚至支持 IE 6.5），因为该站点的访问者将来自世界各地并且可能没有最新的技术。事实上，最近对现有网站的分析表明，10% 的访问者正在使用 3 年以上的浏览器。放眼全球。

代码示例

<table>
  <tr>
    <td><div class="checkbox check_all delete">&nbsp;</div>Delete</td>
    <td><div class="checkbox check_all mark">Mark</div></td>
  </tr>
  <tr>
    <td><div class="checkbox delete">&nbsp;</div></td>
    <td><div class="checkbox mark">&nbsp;</div></td>
    <td>Line 1</td>
  </tr>
  <tr>
    <td><div class="checkbox delete">&nbsp;</div></td>
    <td><div class="checkbox mark">&nbsp;</div></td>
    <td>Line 2</td>
  </tr>
</table>

Answer 1

对于这种情况，我将 div 与 class 分组

<div class="check_all" id="group1">&nbsp;</div>
  <div class="group1">&nbsp;</div>
  <div class="group1">&nbsp;</div>
...
<div class="check_all" id="group2">&nbsp;</div>
  <div class="group2">&nbsp;</div>
  <div class="group2">&nbsp;</div>

和 jQuery 搭配

$('.check_all').on('click',function(){
  $(this).hasClass('checked')?$('.'+this.id).addClass('checked'):$('.'+this.id).removeClass('checked');
});

Answer 2

不如做这样的事情：

<input type="checkbox" data-group-selector="my_group_name" class="check_all">

...

<input type="checkbox" class="my_group_name">

那么……

$('.check_all').on('click', function (e) {
  var group = $(this).data('group-selector');
  $('.' + group).prop('checked');
});

或

<input type="checkbox" id="select_all_my_group_name" class="check_all">

...

<input type="checkbox" class="my_group_name">

那么……

$('.check_all').on('click', function (e) {
  var group = $(this).attr('id').replace('select_all_', '');
  $('.' + group).prop('checked');
});