Home > Web Front-end > JS Tutorial > jquery checkbox all select/cancel example_jquery

jquery checkbox all select/cancel example_jquery

WBOY
Release: 2016-05-16 17:05:58
Original
870 people have browsed it

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

Copy code The code is as follows:

/**
* 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

Copy code The code is as follows:

/**
* 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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template