I recently designed a page that displays all the weekdays and dates from Monday to Sunday. I added a feature where users can check all the weekdays with a single click, and uncheck them with another click. However, I encountered an issue where unchecking a specific weekday, such as Monday or Tuesday, doesn't automatically uncheck the "check all" box. Below is a snippet of the HTML code:
<div class=" row ">
<label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0 warning">
<input type="checkbox" id="rem" class="custom-control-input" [checked]="checkAll" (change)="onChangeCheckAll($event.target.checked)">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
Select All
</label>
</div>
... (more HTML code omitted for brevity)
After identifying the issue, I delved into the JavaScript code to find a solution:
// Function to handle checking or unchecking a specific weekday
onChangeCheckWeek(week: any, isChecked: boolean) {
if (isChecked) {
this.checkAll = false; // Uncheck the "Select All" box
} else {
this.checkAll = false;
}
}
// Function to handle checking or unchecking all weekdays
onChangeCheckAll(isChecked: boolean) {
if (isChecked) {
this.checkAllWeek = true; // Check all weekdays
} else {
this.checkAll = false;
this.checkAllWeek = false; // Uncheck all weekdays
}
}