I want to use javascript or jquery to check the checkbox on accordian when below all of the input checkboxes are selected and uncheck it when one of the checkbox is deselected.
<div class="card w-100">
<div class="card-body">
<div class="mb-4">
<h5 class="mb-0">Permissions</h5>
</div>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed gap-3" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
aria-expanded="false" aria-controls="flush-collapseOne">
<input class="form-check-input" type="checkbox" value=""
id="selectAllList1" onclick="toggleProjects(this)" />
Projects
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<ul class="list-group">
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="list1" name="projects" />
<label class="form-check-label" for="list1">
Add New Project
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="list2" name="projects" />
<label class="form-check-label" for="list2">
View Project
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="list3" name="projects" />
<label class="form-check-label" for="list3">
Edit Project
</label>
</div>
</li>
</ul>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed gap-3" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
<input class="form-check-input" type="checkbox" value=""
id="selectAllList2" onclick="toggleProjectCategory(this)" />
Project Category
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<ul class="list-group">
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="" id="list1" name="projectCategory" />
<label class="form-check-label" for="list1">
Add New Project Category
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="" id="list2" name="projectCategory" />
<label class="form-check-label" for="list2">
View Project Category
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="" id="list3" name="projectCategory" />
<label class="form-check-label" for="list3">
Edit Project Category
</label>
</div>
</li>
</ul>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed gap-3" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
aria-expanded="false" aria-controls="flush-collapseThree">
<input class="form-check-input" type="checkbox" value=""
id="selectAllList3" onclick="toggleProjectType(this)" />
Project Type
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample">
<ul class="list-group">
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="" id="list1" name="projectType" />
<label class="form-check-label" for="list1">
Add New Project Type
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="" id="list2" name="projectType" />
<label class="form-check-label" for="list2">
View Project Type
</label>
</div>
</li>
<li class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="" id="list3" name="projectType" />
<label class="form-check-label" for="list3">
Edit Project Type
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
function toggleProjects(source) {
var checkboxes = document.getElementsByName('projects');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = source.checked;
}
// Check/uncheck the "Select All" checkbox based on the state of individual checkboxes
var selectAllCheckbox = document.getElementById('selectAllList1');
selectAllCheckbox.checked = Array.from(checkboxes).every(checkbox => checkbox.checked);
}
function toggleProjectCategory(source) {
var checkboxes = document.getElementsByName('projectCategory');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = source.checked;
}
}
function toggleProjectType(source) {
var checkboxes = document.getElementsByName('projectType');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
right now it select and deselect all but doesnt work when i uncheck one of the item the checkbox input on the accordian still remains the same.
Aucun commentaire:
Enregistrer un commentaire