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

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

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

JQua ry具体要去如下：

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

JQue ry 代码如下：

<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>

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

原文地址:https://blog.csdn.net/weixin _54185409/ar ti cle/de tail s/130777409

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_42776.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：su wngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

相关文章

发表回复 取消回复

发表回复取消回复