javascript - 如何一键检查特定表格内的所有复选框

Question

我有许多动态表，每个表都会在输入内创建一个动态主复选框，并在td内创建多个复选框(每个表都有不同的ID)。这个想法是，一旦我选中或取消选中主复选框，那个特定表中的每个复选框都会选中/取消选中。 (表格内的一些复选框之前已从 DDBB 中选中或取消选中)

这是一个简单的 HTML，试图模拟我想要做的事情:

function testing() {

  if ($("#masterSwitch1").prop("checked") == true) {
    $('table[id^="table1"]').each(function() {
      $('td[class^="clientAct"]').attr("checked");
      $('td[class^="clientAct"]').prop("checked", true);
    });
  } else {
    $('table[id^="table1"]').each(function() {
      $('td[class^="clientAct"]').removeAttr("checked");
      $('td[class^="clientAct"]').prop("checked", false);
    });
  }

  if ($("#masterSwitch2").prop("checked") == true) {
    $('table[id^="table2"]').each(function() {
      $('td[class^="clientAct"]').attr("checked");
      $('td[class^="clientAct"]').prop("checked", true);
    });
  } else {
    $('table[id^="table2"]').each(function() {
      $('td[class^="clientAct"]').removeAttr("checked");
      $('td[class^="clientAct"]').prop("checked", false);
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="checkbox" onchange="testing()" id="masterSwitch1"> Try me!
<table id="table1">
  <thead>
    <tr>
      <th>Table 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name</td>
      <td><input type="checkbox" class="clientAct" id="s1"></td>
      <td><input type="checkbox" class="clientEje" id="s2" checked></td>
    </tr>
    <tr>
      <td>Last Name</td>
      <td><input type="checkbox" class="clientAct" id="s3" checked></td>
      <td><input type="checkbox" class="clientEje" id="s4"></td>
    </tr>
  </tbody>
</table>
<br>
<input type="checkbox" onchange="testing()" id="masterSwitch2"> Try me 2!
<table id="table2">
  <thead>
    <tr>
      <th>Table 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name 2</td>
      <td><input type="checkbox" class="clientAct" id="s1"></td>
      <td><input type="checkbox" class="clientEje" id="s2" checked></td>
    </tr>
    <tr>
      <td>Last Name 2</td>
      <td><input type="checkbox" class="clientAct" id="s3" checked></td>
      <td><input type="checkbox" class="clientEje" id="s4"></td>
    </tr>
  </tbody>
</table>

感谢您的帮助。我非常感谢您的指导。

Answer 1

This code is worked it,so you can try this..!

$(".testing").on("change",function(){
  var id = $(this).attr('id');
  var tableID = $(this).data('id');

  if($('#'+id+'').prop("checked") == true) {
      $('#'+tableID+'').find('.clientAct').attr("checked", true);
      $('#'+tableID+'').find('.clientEje').attr("checked", true);
  } else {
      $('#'+tableID+'').find('.clientAct').attr("checked", false);
      $('#'+tableID+'').find('.clientEje').attr("checked", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="testing" id="masterSwitch1" data-id="table1"> Try me!
<table id="table1">
   <thead>
      <tr>
         <th>Table 1</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Name</td>
         <td><input type="checkbox" class="clientAct" id="s1"></td>
         <td><input type="checkbox" class="clientEje" id="s2" checked></td>
      </tr>
      <tr>
         <td>Last Name</td>
         <td><input type="checkbox" class="clientAct" id="s3" checked></td>
         <td><input type="checkbox" class="clientEje" id="s4"></td>
      </tr>
   </tbody>
</table>
<br>
<input type="checkbox" class="testing" id="masterSwitch2" data-id="table2"> Try me 2!
<table id="table2">
   <thead>
      <tr>
         <th>Table 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Name 2</td>
         <td><input type="checkbox" class="clientAct" id="s1"></td>
         <td><input type="checkbox" class="clientEje" id="s2" checked></td>
      </tr>
      <tr>
         <td>Last Name 2</td>
         <td><input type="checkbox" class="clientAct" id="s3" checked></td>
         <td><input type="checkbox" class="clientEje" id="s4"></td>
      </tr>
   </tbody>
</table>