jQuery checkbox复选框全选功能的实例

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/kk2009/blog/167465

文章标签：

#javascript #ViewUI

本文提供了一个使用jQuery实现全选与反选所有子复选框的功能代码实例。通过监听主复选框的状态变化来同步更新所有子复选框的状态，并且支持双向联动。

为什么80%的码农都做不了架构师？>>>

jQuery checkbox复选框全选功能的代码实例，有需要的朋友可以参考一下

// 主复选框 
<input type="checkbox" id="ck" name="ckAll">// 子复选框项 
<input type="checkbox" id="ck1" name="ckItm"> 
<input type="checkbox" id="ck2" name="ckItm"> 
<input type="checkbox" id="ck3" name="ckItm"> 

var $ckAll = $("input[name='ckAll']"); 
var $ckItm = $("input[name='ckItm']"); 
var len = $ckItm.length; 
$ckAll.click(function() { 
　　// 获取$ckAll当前选中状态，如果选中，其他子复选框则选中，反之则取消 
    $ckItm.prop('checked',this.checked); 
}); //www.jbxue.com 
$ckItm.click(function() { 
    // 给b绑定判断事件 
    var b=$ckItm.filter(":checked").length==len;// 当所选的子复选框个数等于总个数，主复选框则会被选中 
    // 通过三元运算判断 
    var flag=$ckAll.prop("checked",b?true:false); 
});

转载于:https://my.oschina.net/kk2009/blog/167465