jQuery实现的Checkbox“全选/全不选”

时间:2022-11-17 19:38:07

自己实现的checkbox的“全选/全不选”,只需要传入“全选/全不选”checkbox的id属性和行的checkbox的name属性即可

/**
* 全选/全不选
* 适用于上下两个“全选/全不选”(也可以只有一个“全选/全不选”)
* 每行数据的checkbox的name也必须相同
* 若有两个“全选/全不选”,他们的name属性必须相同,id不同
*/


/**
* 全选/全不选
* @param source 触发“全选/全不选”点击事件的复选框的id
* @param itemName 栏目的name
* @param other 另一个“全选/全不选”的复选框id
*/
function checkItems(source, itemName, other){
$("#"+source).bind('click', function(){
if(this.checked){
$("input[name='" + itemName + "']").each(function(){
this.checked = true;
});
} else {
$("input[name='" + itemName + "']").each(function(){
this.checked = false;
});
}
if($("#"+other)){
$("#"+other).attr("checked", this.checked);
}
});
}
/**
* 若所有的行被选中,则全选也设置为选中状态
* @param allName “全选/全不选”checkbox的name
* @param subName 栏目的name
*/
function checkSelectAll(allName,subName){
var i = 0,j = 0;
$("input[name='" + subName + "']").each(function(){
i++;
if (this.checked) {
j++;
}
});
if(i == j){//所有的行被选中,设置全选为选中状态
$("input[name='" + allName + "']").each(function(){
this.checked = true;
});
} else {//不是所有的行被选中,设置全选为未选中状态
$("input[name='" + allName + "']").each(function(){
this.checked = false;
});
}
}