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