checkbox利用JQuery实现全选、反选的方法

最新推荐文章于 2024-04-17 09:12:12 发布

转载最新推荐文章于 2024-04-17 09:12:12 发布 · 412 阅读

收录于

8 篇文章

订阅专栏

本文介绍了一种实现网页中复选框全选及子项联动效果的方法。通过两个JavaScript函数，可以轻松实现全选按钮控制所有子复选框的状态，以及子复选框状态变化时自动更新全选按钮的状态。此方案适用于需要批量操作选项的场景。

//复选框事件
//全选、取消全选的事件
function selectAll(){
if ($("#SelectAll").attr("checked")) {
$(":checkbox").attr("checked", true);
} else {
$(":checkbox").attr("checked", false);
}
}
//子复选框的事件
function setSelectAll(){
//当没有选中某个子复选框时，SelectAll取消选中
if (!$("#subcheck").checked) {
$("#SelectAll").attr("checked", false);
}
var chsub = $("input[type='checkbox'][id='subcheck']").length; //获取subcheck的个数
var checkedsub = $("input[type='checkbox'][id='subcheck']:checked").length; //获取选中的subcheck的个数
if (checkedsub == chsub) {
$("#SelectAll").attr("checked", true);
}
}