jquery实现全选功能
程序员文章站
2022-07-13 23:02:09
...
<!--HTML部分:-->
<ul>
<li><input type="checkbox" class="chk" id="checkAll"/><label for="checkAll">全选</label></li>
<li><input type="checkbox" class="chk chk01"/>1</li>
<li><input type="checkbox" class="chk chk01"/>2</li>
<li><input type="checkbox" class="chk chk01"/>3</li>
<li><input type="checkbox" class="chk chk01"/>4</li>
<li><input type="checkbox" class="chk chk01"/>5</li>
</ul>
<!--JS部分:-->
$(document).on("click","#checkAll",function(){
$(".chk01").prop("checked",$(this).prop("checked"))//多选框的状态与全选框状态保持一致
})
$(".chk01").each(function(){
$(this).click(function(){
if(!$(this).prop("checked")){//多选框有一个未选中 全选变为未选中状态
$("#checkAll").prop("checked",false)
}else if($(this).prop("checked")){
$(".chk01").each(function(index,ele){
if($(this).prop("checked")){
if(index == $(".chk01").length - 1){
$("#checkAll").prop("checked",true)//多选框全部选中 全选变为选中状态
}
return true//each()跳过本次循环
}else{
return false//each()跳出循环
}
})
}
})
})
上一篇: 自定义ScrollView 实现图片放大,上滑修改标题栏状态
下一篇: 多选框
推荐阅读
-
自己写的php curl库实现整站克隆功能,phpcurl_PHP教程
-
基于jQuery使用Ajax动态执行模糊查询功能
-
微信小程序中进行地图导航功能的实现方法
-
SpringBoot中如何灵活的实现接口数据的加解密功能?
-
基于SSM实现过滤器及拦截器功能,并实现角色权限功能
-
基于canvas.toDataURL实现video和webGl的截图功能
-
jquery实现显示textarea输入字符数
-
Python使用win32 COM实现Excel的写入与保存功能示例
-
在 Laravel 中使用 Laravel Searchy 扩展包实现基于数据库的轻量级搜索功能
-
jquery的each(callback) 怎么使用?会实现什么样的效果?