button实现一组checkbox的全选与全不选效果

最新推荐文章于 2024-02-21 09:46:58 发布

米米余

最新推荐文章于 2024-02-21 09:46:58 发布

阅读量1.1k

点赞数

分类专栏：编程总结 jquery 文章标签： checkbox全选 checkbox全不选 jquery

本文链接：https://blog.youkuaiyun.com/qq_37017864/article/details/71749714

版权

编程同时被 3 个专栏收录

27 篇文章

订阅专栏

总结

22 篇文章

订阅专栏

jquery

4 篇文章

订阅专栏

这篇博客展示了如何使用jQuery实现HTML中一组checkbox的全选和全不选效果。通过监听按钮点击事件，利用jQuery的prop()方法切换checkbox的选中状态，实现多次点击按钮可以交替进行全选和全不选的操作。

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

<html>
<head>
    <meta charset="utf-8"/>
    <script src="reference/js/jquery-3.2.0.min.js"></script>
</head>
<body>
<input type="checkbox"  name="box"/>读书<br/>
<input type="checkbox"  name="box"/>思考<br/>
<input type="checkbox"  name="box"/>思考<br/>
<input type="checkbox"  name="box"/>睡觉<br/>
<button id="all">全选</button>
</body>
<script type="text/javascript">
    var  i=0;
    $(function(){
            $("#all").click(
                function (){

                    $("input[name='box']").prop("checked","checked");
                    //这个地方只能用prop实现多次点击切换全选和全不选的效果，用attr的话不会多次实现。
                    // 因为attr不会记录当前checkbox的选中状态，所以这个地方只能使用prop

                    if(i==1){

                        $("input[name='box']").prop("checked",false);

                    }
                    i++;
                    if(i>1){
                        i=0;
                    }

                }
            );
        }
    );
</script>
</html>