I want to make select all but divided by group, all I can do is select all checkboxes, not by group
here's is my blade:
<div class="col-md-6 ">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 1</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group1" type="checkbox" class="custom-control-input" onchange="checkAll(this)"/>
<label for="selectall_group1" class="custom-control-label">
Select All
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content10" name="permission_id[]" type="checkbox" class="custom-control-input"/>
<label for="content10" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content11" name="permission_id[]" type="checkbox" class="custom-control-input"/>
<label for="content11" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>
<div class="col-md-6 ">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 2</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group2" type="checkbox" class="custom-control-input" onchange="checkAll(this)"/>
<label for="selectall_group2" class="custom-control-label">
Select All
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content12" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content12" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content13" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content13" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>
I already add select all but it's select all checkboxes, I don't know if I should fix the loop so I can get id from the permission. I just stuck on this.
here's the javascript that I use for the select
<script>
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox' && !(checkboxes[i].disabled)) {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}
</script>
fiddle here: https://jsfiddle.net/rs2g9ct3/
This works with your HTML if you add a class to the wrapper div - I chose groupContainer
I delegate from document - if you have a closer static container, use that instead
document.addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.type && tgt.type==="checkbox" && tgt.id.startsWith("selectall")) {
const checked = tgt.checked;
const parent = tgt.closest(".groupContainer");
const checks = parent.querySelectorAll("input[type=checkbox][id^=content]");
[...checks].forEach(chk => {
if (!chk.disabled) chk.checked = checked;
})
}
})<div class="col-md-6 groupContainer">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 1</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group1" type="checkbox" class="custom-control-input" />
<label for="selectall_group1" class="custom-control-label">Select All</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content10" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content10" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 1</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content11" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content11" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>
<div class="col-md-6 groupContainer">
<div class="row mb-3 ">
<div class="col-md-6">
<b>Group 2</b>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="selectall_group2" type="checkbox" class="custom-control-input" />
<label for="selectall_group2" class="custom-control-label">
Select All
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content12" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content12" class="custom-control-label mr-auto"></label>
</div>
</div>
<div class="col-md-6">
<p>content 2</p>
</div>
<div class="col-md-6 d-flex justify-content-end">
<div class="custom-control custom-checkbox custom-control-right">
<input id="content13" name="permission_id[]" type="checkbox" class="custom-control-input" />
<label for="content13" class="custom-control-label mr-auto"></label>
</div>
</div>
</div>
</div>