CODEWITHSUNDEEP
javascriptjqueryhtml
Morroc's Thief
Morroc's Thief

Reputation: 53

How to check all checkboxes inside an specific table with one button

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>

Thanks for your help. I really appreciate your guidance.

Upvotes: 2

Views: 104

Answers (4)

Alfarouq
Alfarouq

Reputation: 171

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>

Upvotes: 2

JD Savaj
JD Savaj

Reputation: 813

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>

Upvotes: 2

Roman.Pavelko
Roman.Pavelko

Reputation: 1655

Here you are:

$(document).ready(function() {
    $('input[id*="masterSwitch"]').click(function (e) {
        var isChecked = $(e.target).prop('checked');
        $(e.target).next().find('input[type=checkbox]').prop('checked', isChecked);
    });
});

Or in case these blocks (checkbox and table) are dynamically added to the view, you can use your test function this way.
HTML:

<input type="checkbox" onclick="testing(this)" id="masterSwitch1">

JS: 

function testing(checkbox) {
    var isChecked = $(checkbox).prop('checked');
    $(checkbox).next().find('input[type=checkbox]').prop('checked', isChecked);
}

Upvotes: 1

Devsi Odedra
Devsi Odedra

Reputation: 5322

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>

Upvotes: 1

Related Questions