复选框实现单选、全选、全不选、以及给复选框中全选框设置Jquery事件

pricking

已于 2023-05-20 08:44:38 修改

阅读量1.3k

点赞数 1

文章标签： jquery 前端 javascript html

于 2023-05-20 08:42:36 首次发布

本文链接：https://blog.csdn.net/weixin_54185409/article/details/130777409

版权

效果图:

HTML核心代码：

<body>
    <form action="">
        你的爱好是
        <input name="all" type="checkbox" />全选
        <br/>
        <input name="item" type="checkbox" value="打球"/>打球
        <br/>
        <input name="item" type="checkbox" value="打游戏"/>打游戏
        <br/>
        <input name="item" type="checkbox" value="编程"/>编程
        <br/>
        <button id="allBtn" type="button" value="全选">全选</button>
        <button id="revertBtn" type="button"  value="全选">反选</button>
        <button id="noneBtn" type="button"  value="全选">全不选</button>
    </form>
</body>

JQuary具体要去如下：

点击"全选"button 可以选中所有爱好，并且选中”全选“checbox；
点击“反选”按钮button可以将当前选择爱好进行反选；
点击“全不选”button 可以取消选中的所有爱好；
点击“全选”checkbox 可以选中所有爱好；
“全选”checkbox 可以自动监听所有爱好的选中情况，如果爱好全部选中，则自动选中“全选”checkbox ,若没有全部选中，自动取消“全选”checkbox（重点及难点）

JQuery代码如下：

<script>  
    $(function(){
        // 点击”全选”button 可以选中所有爱好, 并且选中”全选”checkbox。
            $("#allBtn").click(function(){
            $("input[name=item]").prop("checked",true)
            $("input[name=all]").prop("checked",true)           
        });
        // 点击”全不选”button 可以取消选中所有的爱好。
        $("#noneBtn").click(function(){
            $("input[name=item]").prop("checked",false)
            $("input[name=all]").prop("checked",false)           
        });
        // 点击”反选”button 可以将当前选中的爱好反选
        $("#revertBtn").click(function(){
            $("input[name=item]").each(function () {
                $(this).prop("checked",!$(this).prop("checked"))   
            });
            update(); //监听事件调用
        });       
        // 点击”全选”checkbox 可以选中所有的爱好
        $("input[name=all]").click(function(){
            $("input[name=item]").prop("checked",true)
            update(); //监听事件调用
        })
        $("input[name=item]").change(function(){
            update(); //监听事件调用
        })
        // 监听并给给全选添加方法以供调用
        function update(){
            
        if ($("input[name=item]:checked").length === $("input[name=item]").length) {
            $("input[name=all]").prop('checked', true);
        } else {
            $("input[name=all]").prop('checked', false);
        }
        }
    });

</script>

别忘记引用Jquery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

以上的难点在于不仅要为“全选”框checkbox添加监听事件，也要监听每个爱好的被选中状态，来改变“全选”框checkbox的选中状态，”反选“ 按钮也要监听。因为要反复监听调用，我将监听事件设计成一个事件方法，以供调用

pricking

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
复选框实现单选、全选、全不选、以及给复选框中全选框设置Jquery事件

以上的难点在于不仅要为“全选”框checkbox添加监听事件，也要监听每个爱好的被选中状态。别忘记引用Jquery。
复制链接

扫一扫

复选框实现单选、全选、全不选、以及给复选框中全选框设置Jquery事件

“相关推荐”对你有帮助么？