jQuery实现按钮的全选

最新推荐文章于 2025-05-05 22:17:58 发布

结果才重要

最新推荐文章于 2025-05-05 22:17:58 发布

阅读量363

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_60237095/article/details/129832286

版权

文章介绍了如何使用jQuery解决全选和取消全选功能的问题。在初始尝试中，使用attr()方法会出现失效的情况，但通过改用prop()方法，可以正确地设置checkbox的状态。同时，添加了对子项checkbox点击时更新全选按钮状态的逻辑。

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

jquery相对js实现就比较简单

<input type="checkbox" id="all"><br>
<input type="checkbox" name="sub"/>1<br>
<input type="checkbox" name="sub"/>2<br>
<input type="checkbox" name="sub"/>3<br>
<input type="checkbox" name="sub"/>4
<script src="js/jquery-1.12.4.js"></script>
<script>
    $("#all").on("click",function () {
        if(this.checked){
            $("input[name='sub']").attr("checked",true);
        }else {
            $("input[name='sub']").attr("checked",false);
        }
    })
</script>

但是这样实现全选和取消全选，有点问题，第一次全选和取消全选后，第二次再点击全选，就会失效。这个时候用prop()方法可以解决这个问题。将js代码替换成下列代码即可以实现按钮的全选和取消全选。

$("#all").on("click",function () {
    $("input[name='sub']").prop('checked',this.checked);
});
$("input[name='sub']").on("click",function () {
    var $sub=$("input[name='sub']");
    $("#all").prop("checked" , $sub.length == $sub.filter(":checked").length ? true :false);
})