您的位置：首页 > 其它

一个简单的checkbox全选实现

2017-12-07 15:11 495 查看

全选是很多项目中必要有的代码块

不多说直接上代码

html代码

<body>
<table>
<tr>
<th><input type='checkbox' id='allcheck'/></th>
<th>你喜欢什么</th>
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>天龙八部</td>
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>少年包青天</td>
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>猎场</td>
</tr>
</table>
</body>

javascript（基于jQuery）

$(function(){
//获取所有的除了全选的checkbox
var cks= $(':checkbox:gt(0)');
//给全选checkbox绑定click事件
var allcheck=$('#allcheck').click(function(){
//让所有非全选checkbox checked状态和全选checkbox一致
cks.prop("checked", $(this).prop("checked"));
})
//每个非全选checkbox绑定事件
cks.click(function(){
if(!$(this).prop('checked')){
//有不是选中的则修改全选的未非选中
allcheck.prop('checked',false);
}else{
//检查所有的非全选的checkbox是否是选中的
if(cks.filter($(':not(:checked)')).length==0){
allcheck.prop('checked',true);
}
}
})
})

觉得有问题请指正！

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

标签：

相关文章推荐

新的分享

章节导航