jquery实现全选和取消全选(包含子选框全选中,父选框选中功能)

来源:互联网 发布:北京大学寝室知乎 编辑:程序博客网 时间:2024/06/08 12:54

jquery实现全选和取消全选(包含子选框全选中,父选框选中功能)

    HTML代码

<input type="checkbox" name="" id="checkall">全选/取消
<div>
<ul class="ul1">
<li><input type="checkbox" name="" class="check1" onclick="selectPa();">子选框1</li>
<li><input type="checkbox" name="" class="check1" onclick="selectPa();">子选框2</li>
<li><input type="checkbox" name="" class="check1" onclick="selectPa();">子选框3</li>
</ul>
</div>

  JS代码:

<script type="text/javascript">
//父选框的全选和取消全选
var ischeck=false;//全选标记
$("#checkall").click(function(){
if (ischeck) {
$(".check1").attr("checked",!ischeck);
ischeck=false;
}else{
$(".check1").attr("checked",!ischeck);
ischeck=true;
}
});

//子选框全部选中,父选框选中;子选框不全选中,父选框不选中
var isallcheck=true;//所有的子选框选中的标记
function selectPa(){
$(".check1").each(function(i,o){
if(!$(o).prop("checked")){
isallcheck=false;
return;
}
});
if(isallcheck){
ischeck=true;
$("#checkall").prop("checked",isallcheck);
}else{
ischeck=false;
$("#checkall").prop("checked",isallcheck);
}
isallcheck=true;//恢复所有的子选框选中的默认标记
};
</script>
原创粉丝点击