JavaScript How to check all checkboxes inside an specific table with one button check all checkboxes inside div jquery,check all checkboxes inside

I have many dinamic tables, each one creates a dinamic master checkbox inside an input and several checkboxes inside td's (each one has a different ID). The idea is once I check or uncheck the master checkbox, every checkbox inside THAT specific table check/uncheck. (Some checkboxes inside table are previously check or uncheck from DDBB)

Here is a simple HTML trying to emulate what I want to do:

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>

Answer:2

Please try this

$("#masterSwitch1").on("change", function(){
  

  if($("#masterSwitch1").is(':checked')){
    $('#table1 input[type=checkbox]').each(function() {
        var checkbox=$(this);
        checkbox.prop("checked",true)
    });
  }else{
    $('#table1 input[type=checkbox]').each(function() {
        var checkbox=$(this);
        checkbox.prop("checked",false)
    });
  }
})

$("#masterSwitch2").on("change", function(){
  

  if($("#masterSwitch2").is(':checked')){
    $('#table2 input[type=checkbox]').each(function() {
        var checkbox=$(this);
        checkbox.prop("checked",true)
    });
  }else{
    $('#table2 input[type=checkbox]').each(function() {
        var checkbox=$(this);
        checkbox.prop("checked",false)
    });
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox"  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"  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:3

Simply you could do as below, you do need to use each loop

Also you have use id as id="s2" which is duplicated, you should use unique id in document.

function testing() {

if( $("#masterSwitch1").prop("checked") == true) {
    
    $('#table1').find('.clientAct').attr("checked", true);
} else {
    $('#table1').find('.clientAct').attr("checked", false);
}

if( $("#masterSwitch2").prop("checked") == true) {
    
    $('#table2').find('.clientAct').attr("checked", true);
} else {
    
    $('#table2').find('.clientAct').attr("checked", false);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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:4

Injecting jQuery namespace into AngularJS

I'm having a bit of a trouble here. I'm using RequireJS to load my modules and dependencies. I am trying to avoid polluting the global namespace, so I am using the following configuration as a ...

Display number series with modulo in JavaScript

I'm currently trying to display number series (for 2, 3, 4, 5, 6 and 7) in JavaScript. I was looking for the smallest number (x), which results in modulo = 1, if divided by 2, 3, 4, 5 and 6. If the ...

display prime number series in python

How can I filter/search multiple subarrays?

I am working on a search function for a parent child structure with locations (city,suburb,street). I want to search for a street name and get the results but keeping the structure. The array ...

filter search multiple values excel
filter search multiple values
filter search multiple excel
filter search multiple pivot
search filter multiple
search filter multiple php
excel filter search multiple words
django-filter search multiple fields
angularjs filter search multiple fields
angular filter search multiple fields
excel filter search multiple criteria
excel filter search multiple entries
excel filter search multiple items
excel filter search multiple columns
angularjs search filter multiple parameters
ldap search filter multiple ou
angular search filter multiple parameters
ldap search filter multiple groups
ldap search filter multiple attributes
ldap search filter multiple cn

Angular config according to environment (dev, staging, production)

It's silly, I know - every time I change environment I comment out and back my app's config factory. There must be a better way, is there? I though of checking the URL but this seems like a bad ...