input checkbox jquery全选

最新推荐文章于 2023-12-13 15:32:43 发布

梦飞了吧

最新推荐文章于 2023-12-13 15:32:43 发布

阅读量486

点赞数

分类专栏： Jquery 文章标签： jquer

Jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用jQuery实现复选框全选及取消全选的方法。通过简单的HTML结构与jQuery事件绑定，实现了主复选框控制一组子复选框的状态。当主复选框被点击时，所有子复选框的状态会随之改变；反之，当所有子复选框都被选中时，主复选框也会自动选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、checkbox日常jquery操作

[html]view plain copy
<span style="font-size:14px;"><input id="checkAll" type="checkbox" />全选  
        <input name="subBox" type="checkbox" />项1  
        <input name="subBox" type="checkbox" />项2  
        <input name="subBox" type="checkbox" />项3  
        <input name="subBox" type="checkbox" />项4</span>  

全选和取消代码：

[javascript]view plain copy
$(function() {  
   $("#checkAll").click(function() {  
        $('input[name="subBox"]').prop("checked",this.checked);   
    });  
    var $subBox = $("input[name='subBox']");  
    $subBox.click(function(){  
        $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);  
    });  
});  