Question

这可能不像标题那样简单。

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

我还有另一个复选框（div），它是'master'，用于选择同一组中的所有其他复选框（本例中为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）将master和所有子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

如何做：

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

OR

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

Answer 2

对于这种情况，我将div与类

分组

<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 with

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

jQuery：复选框，用于选择（或取消选择）其组中的所有其他复选框

2 个答案: