Checkbox Component
For understanding, how the component work, please refer to alert components
php artisan make:component checkboxComponent
When checkAll class element is clicked, then script checks if it is checked or not. If it is checked, then all checkboxes class elements will be checked else it will be unchecked.
If checkboxes class element is click It then checked if numberOfCheckboxes equals to numberOfCheckboxesChecked then checkAll class element will be checked else it will not uncheck.
This is used in the table (display records) in the application to perform multi-action, e.g. delete multiple record of leave types in one click.
<script>
window.addEventListener('load', function() {
$(function(){
$('.checkAll').click(function(){
if (this.checked) {
$(".checkboxes").prop("checked", true);
} else {
$(".checkboxes").prop("checked", false);
}
});
$(".checkboxes").click(function(){
var numberOfCheckboxes = $(".checkboxes").length;
var numberOfCheckboxesChecked = $('.checkboxes:checked').length;
if(numberOfCheckboxes == numberOfCheckboxesChecked) {
$(".checkAll").prop("checked", true);
} else {
$(".checkAll").prop("checked", false);
}
});
});
});
</script>
Nothing is change in breadcrumbComponent class file
