好资源导航 » 文章资讯 » jQuery实现简单全选框

jQuery实现简单全选框

2023-07-16 19:29:03 80

本文实例为大家分享了jQuery实现简单全选框的具体代码，供大家参考，具体内容如下

1.要求：

（1）实现全选框勾选时其他复选框全部选中，全选框取消勾选时其他复选框全部取消选中
（2）当复选框有取消选中时，全选框也要取消勾选

2.HTML部分


学生信息表



全选

学号
姓名
性别
年龄
学分





1001
小米
男
23
100





1002
小栋
男
23
50





1002
小栋
男
23
50

3.css部分


*{
margin:0;
padding:0;
}
table,tr,td,th{
border:1pxsolidblack;
}
#table{
border-collapse:collapse;
border-spacing:none;
width:50%;
margin:0auto;
text-align:center;
}
tr{
height:40px;
}

4.jQuery部分



$(function(){
//隔行换色效果
$('#tabletbody>tr:even').css("background","#cccccc");
//定义变量接收全选框与其他复选框的对象
var$checkedAll=$("#checkedAll");
var$items=$(":checkbox[name=items]");
//全选框点击事件
$checkedAll.click(function(){
if(this.checked){//$(this).prop("checked")
$items.prop('checked',true);
}else{
$items.prop('checked',false);
}
})
//复选框全部选中时将全选框勾选上
$items.click(function(){
//当没有选中的复选框个数为0时，就是全选时刻
if($items.not(":checked").length===0){
$checkedAll.prop('checked',true);
}else{
$checkedAll.prop('checked',false);
}
})

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

jQuery实现简单全选框

热门推荐

随机推荐