频道栏目
首页 > 资讯 > HTML/CSS > 正文

Jquery之复选框全选or全不选教程

18-08-01        来源:[db:作者]  
收藏   我要投稿

主复选框 id="fcheck" onclick="javascript:checkall(this)"
子复选框 onclick="javascript:fchk()" 所有子复选框外层有个id="list"的节点

function checkall(checkbox) {//全选 or全不选
$("#list input[type=checkbox]").prop('checked', $(checkbox).prop('checked'));
//id=list元素 下所有type=CheckBox也就是所有复选框,添加属性 checked,值为 id=checkbox元素当前checked值。
//设置所有子复选框与主复选框相同

}

function fchk(){
// 根据是否 全选/全不选 更改父checkbok状态
var $subBox = $("#list input[type=checkbox]");
//获取所有子复选框
alert($("#list input[type=checkbox]:checked").length );
//为了调试打印复选框的个数
if($subBox.length == $("#list input[type=checkbox]:checked").length ){
//如果选中的复选框与总数相等,则是全选状态,
$("#fcheck").prop('checked','checked');
//将主复选框设置为选中状态
}else{
//否则就代表未全选
$("#fcheck").removeAttr("checked");
//将主复选框设置为未选中状态
}
}

相关TAG标签
上一篇:mysql左连接练习题:组合两个表+从不订购的客户
下一篇:nodenpmcnpmvue搭建环境过程
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站