I have the following table.
I want to toggle all the switches with class name the-checkbox-input
when toggled the first switch with class name checkbox-input-main
. I tried the following code but it is not working. The code seems fine to me.
How can I resolve this? I tried a lot but couldn't find any error. The code still doesn't work.
$(document).ready(function() {
$(".checkbox-input-main").on("click", function() {
if ($(this).is(":checked")) {
$(".the-checkbox-input").attr("checked");
} else {
$(".the-checkbox-input").removeAttr("checked");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered text-center dso-table">
<thead class="thead-dark">
<tr>
<th scope="col">
<label class="switch mb-0">
<input type="checkbox" class="checkbox-input-main">
<span class="slider round"></span>
</label>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<label class="switch">
<input type="checkbox" class="the-checkbox-input">
<span class="slider round"></span>
</label>
</th>
</tr>
<tr>
<th scope="row">
<label class="switch">
<input type="checkbox" class="the-checkbox-input">
<span class="slider round"></span>
</label>
</th>
</tr>
</tbody>
</table>
CodePudding user response:
You missed the ,true
in $(".the-checkbox-input").attr("checked",true)
but this is simpler
I use PROP because that is recommended and using attr seems to not re-check when unchecking one
$(function() {
const $mainCheck = $(".checkbox-input-main");
const $chks = $(".the-checkbox-input");
$mainCheck.on("click", function() {
$chks.prop("checked", this.checked);
});
$chks.on("click", function() {
const checked = $chks.filter(function() { return this.checked }).length
$mainCheck.prop("checked", checked === $chks.length)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered text-center dso-table">
<thead class="thead-dark">
<tr>
<th scope="col">
<label class="switch mb-0">
<input type="checkbox" class="checkbox-input-main">
<span class="slider round"></span>
</label>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<label class="switch">
<input type="checkbox" class="the-checkbox-input">
<span class="slider round"></span>
</label>
</th>
</tr>
<tr>
<th scope="row">
<label class="switch">
<input type="checkbox" class="the-checkbox-input">
<span class="slider round"></span>
</label>
</th>
</tr>
</tbody>
</table>
Plain JS
window.addEventListener("load", function() {
const mainCheck = document.querySelector(".checkbox-input-main");
const chks = [...document.querySelectorAll(".the-checkbox-input")]; /// cast to array
mainCheck.addEventListener("click", function() {
chks.forEach(chk => chk.checked = this.checked);
});
chks.forEach(chk => chk.addEventListener("click", function() {
const checked = chks.filter(chk => chk.checked).length;
mainCheck.checked = checked === chks.length;
})
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered text-center dso-table">
<thead class="thead-dark">
<tr>
<th scope="col">
<label class="switch mb-0">
<input type="checkbox" class="checkbox-input-main">
<span class="slider round"></span>
</label>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<label class="switch">
<input type="checkbox" class="the-checkbox-input">
<span class="slider round"></span>
</label>
</th>
</tr>
<tr>
<th scope="row">
<label class="switch">
<input type="checkbox" class="the-checkbox-input">
<span class="slider round"></span>
</label>
</th>
</tr>
</tbody>
</table>