jquery复选框全选/取消示例_jquery
程序员文章站
2022-05-30 15:58:09
...
功能:
/**
* 全选函数
* @param mainId 主复选框id
* @param klass 下属复选框的class
*/
function selectAll(mainId,klass){
$("." + klass).each(function(){
if($("#" + mainId).attr("checked")== "checked"){
$(this).attr("checked", "checked");
}
else{
$(this).removeAttr("checked");
}
});
}
/**
* 子复选框有一个选中 父复选框就选中
子复选框全不选 父复选框不选中
* @param father 父复选框的id
* @param son 子复选框的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("至少有一个子复选框选中!");
}else{
$("#"+father).removeAttr("checked");
// console.log("所有子复选框都未选中!");
}
});
};
a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态
b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中
复制代码 代码如下:
/**
* 全选函数
* @param mainId 主复选框id
* @param klass 下属复选框的class
*/
function selectAll(mainId,klass){
$("." + klass).each(function(){
if($("#" + mainId).attr("checked")== "checked"){
$(this).attr("checked", "checked");
}
else{
$(this).removeAttr("checked");
}
});
}
以上实现全选及全部取消 所有子复选框,至于数据的实现则在控制器里接收到复选框的数组即可
复制代码 代码如下:
/**
* 子复选框有一个选中 父复选框就选中
子复选框全不选 父复选框不选中
* @param father 父复选框的id
* @param son 子复选框的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("至少有一个子复选框选中!");
}else{
$("#"+father).removeAttr("checked");
// console.log("所有子复选框都未选中!");
}
});
};
以上实现 一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中
上一篇: 【夔堂】程序血泪史之——有一种垃圾语言叫做JavaScript
下一篇: 实施软件的几点总结