Function:
a: When clicking a checkbox, select all sub-checkboxes, and then click to cancel the selected state of all checkboxes
b: If one child checkbox is selected, the parent checkbox is selected and all child checkboxes are unchecked, then the parent checkbox is unchecked
/**
* Select all function
* @param mainId main checkbox id
* @param klass class of subordinate checkbox
*/
function selectAll(mainId,klass){
$("." klass).each(function(){
if($("#" mainId).attr("checked")== "checked"){
$(this).attr("checked", "checked");
}
else{
$(this).removeAttr("checked");
}
});
}
The above implements all selection and cancellation of all sub-checkboxes. As for the implementation of data, just receive the array of checkboxes in the controller
/**
* If one of the child checkboxes has the parent checkbox selected, select it
Uncheck all child checkboxes and uncheck the parent checkbox
* @param father The id of the parent checkbox
* @param son sub-checkbox class
*/
function checkSonCheckBox(father,son){
$("." son).click(function(){
if($(this).attr("checked")== "checked"){
$(this).addClass("checked");
}else{
$(this).removeClass("checked");
}
if($("." son). hasClass("checked")){
$("#" father).attr("checked","checked");
// console.log("At least one sub-checkbox is selected!" );
}else{
$("#" father).removeAttr("checked");
// console.log("All sub-checkboxes are unchecked!");
}
});
};
The above implementation: If one child checkbox is selected, the parent checkbox is selected, and all child checkboxes are unchecked, the parent checkbox is unchecked