您的位置：首页 > Web前端 > JQuery

利用jquery一键控制复选框的全选/全不选

2018-03-18 13:17 197 查看

设置一个总的复选框控制子复选框的全选与全不选，在子复选框全选后，只要取消其中一个的勾选，总的复选框不能勾选。

代码部分（样式省略）

<body>
<table>
<tr>
<td>全选控制按钮：<input type="checkbox" id="chooseAll"/></td>
</tr>
<tr>
<td>子按钮1：<input type="checkbox" class="children" /></td>
</tr>
<tr>
<td>子按钮2：<input type="checkbox" class="children" /></td>
</tr>
<tr>
<td>子按钮3：<input type="checkbox" class="children" /></td>
</tr>
<tr>
<td>子按钮4：<input type="checkbox" class="children" /></td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#chooseAll").click(function(){
var flag=$(this).prop("checked");

//控制其他子按钮的选择与不选择
$(".children").prop("checked",flag);
});

//子按钮控制控制按钮的勾选与否
$(".children").click(function(){
//获得一组子按钮标签
var children=$(".children");

for(var i=0; i<children.length;i++){
//子按钮其中有个不选的时候，控制按钮不能勾选
if(children.eq(i).prop("checked")==false){
$("#chooseAll").prop("checked",false);
return;
}
}
$("#chooseAll").prop("checked",true);
});

});
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航