复选框，选择(或取消选择)其组内的所有其他复选框

jQuery: checkbox that selects (or deselects) all other checkboxes within its group

本文关键字：复选框 选择 其他 取消      更新时间：2023-09-26

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

我有一个div设置为一个自制的复选框通过类(1px边框，16px正方形，自定义图形作为复选符号应用作为背景图像)。当点击时，'checked'类被应用。很简单。示例(未选中):<div class="checkbox group1">&nbsp;</div>

我还有另一个复选框(div)，它是选择同一组(在本例中为group1)中的所有其他复选框的"主"。这个主机有一个特殊的类叫做"check_all":<div class="checkbox check_all group1">&nbsp;</div>

所以你说"简单;当选中"check_all"时，只需选中group1中的所有框。"没那么容易。check_all是一个贯穿整个网站的通用类，所以它可以在其他页面上重复使用;我还可以将它应用到同一页面上的group2、group3等等。我需要jQuery函数来检查同一组内的所有。更复杂的是，组名不是顺序的，也不是以任何方式相关的;可以是"发票"、"cart_items"或"地址"。

我想到的事情:

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

2)在组名"check_all_group1"后添加"check_all_"。问题:jQuery hasclass似乎不支持通配符来执行"以…开始"来附加处理程序函数。即使是这样，您仍然必须处理类并执行字符串函数才能到达"group1"。看起来很笨拙，不理想。

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

欢迎对整个概念进行重新设计。我只需要一个简单的方法，在一个可重用的类，是附加到一个函数，将选择所有其他"复选框"元素与同一组下降。

编辑:

这个解决方案必须是跨浏览器支持的(甚至是ie6.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>

对于这种情况，我将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');
});

不如这样做:

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

相关文章：