Question

我有一个html表，用于递增每个主机的类，以便每个主机和子主机具有相同的类，如下所示：

+-------------+--------------+
| host        | child host   | 
+-------------+--------------+
| class=host0 | class=host0  |
+-------------+--------------+
|             | class=host0  |
+-------------+--------------+
|             | class=host0  |
+-------------+--------------+
| class=host1 | class=host1  | 
+-------------+--------------+
|             | class=host1  | 
+-------------+--------------+

每个主机/子主机都有一个复选框。

<input class='host{$hostcount}'type='checkbox'>

我希望主机复选框选择所有子主机。下面的代码适用于host0，如何使它适用于任何主机？

$(document).ready(function() {
    $('.host0').change(function () {
        if ($(this).prop('checked')) {            
            $('.host0:checkbox').prop('checked', true);
        } else {
            $('.host0:checkbox').prop('checked', false);
        }
    });
$('#selectAllHost').trigger('change');
});

Answer 1

我会给他们父/子类，从类名中删除数字，而是为该数字添加数据属性，以便您可以更轻松地定位它们。

$(document).ready(function() {

  // change a parent checkbox
  $('.host.parent').change(function() {

    // grab the id and checked value
    const id = $(this).data('id');
    const checked = $(this).prop('checked');

    // toggle all the children with the same id
    $(`.host.child[data-id=${id}]`).prop('checked', checked ? true : false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>0<input class="host parent" data-id="0" type="checkbox" /></td>
    <td><input class="host child" data-id="0" type="checkbox" /><input class="host child" data-id="0" type="checkbox" /></td>
  </tr>
  <tr>
    <td>1<input class="host parent" data-id="1" type="checkbox" /></td>
    <td><input class="host child" data-id="1" type="checkbox" /><input class="host child" data-id="1" type="checkbox" /></td>
  </tr>
</table>

Answer 2

首先，您可以向主机添加其他类和数据属性。

<input class='host host{$hostcount}' data-target='host{$hostcount}' type='checkbox'>

共享的host类将使我们概括事件绑定，而目标将告诉我们我们需要更改什么。

$(document).ready(function() {
  $('.host').change(function (e) {
    var target = $(e.target).data('target');

    $('.'+ target +':checkbox').prop('checked', e.target.checked);
  });

  $('#selectAllHost').trigger('change');
});

Answer 3

也许您可以使用"[class^='host']"选择器来选择“任何类名称以'host'开头的元素”。

这使您可以检测何时单击“主机”复选框。从那里，为该复选框提取实际的“主机”类：

    var hostClass = $(this).attr('class')
    .split(' ')
    .find(className => className.indexOf('host') !== -1)

如果为此复选框找到hostClass，请使用它来选择和切换相应的“子”复选框输入：

$(document).ready(function() {
    
    // Select all checkbox elements from 'host-column' that start 
    // with host 
    $("[class^='host']", ".host-column").change(function () {
    	
        // Extract actual host class for this checkbox	
        var hostClass = $(this).attr('class')
        .split(' ')
        .find(className => className.indexOf('host') !== -1)
        
        if(hostClass) {
        
          // Select corresponding children checkbox elements (exclude this)
          var childCheckboxes = $('.'+ hostClass +':checkbox')
          .not($(this));
        
          if ($(this).prop('checked')) {            
              childCheckboxes.prop('checked', true);
          } else {
              childCheckboxes.prop('checked', false);
          }
        }
    });
  
    $('#selectAllHost').trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<table>
<tbody>
  
<tr>
  <td>host</td>
  <td>child</td>
</tr>
<tr>
  <td class="host-column">
    <input type="checkbox" class="host0">
  </td>
  <td>
    <input type="checkbox" class="host0">
    <input type="checkbox" class="host0">
    <input type="checkbox" class="host0">
    <input type="checkbox" class="host0">
  </td>
</tr>
<tr>
  <td class="host-column">
    <input type="checkbox" class="host1">
  </td>
  <td>
    <input type="checkbox" class="host1">
    <input type="checkbox" class="host1">
    <input type="checkbox" class="host1">
    <input type="checkbox" class="host1">
  </td>
</tr>

</tbody>

按班级选择所有复选框，班级递增

3 个答案: