jq实现全选和全不选

作者: BugKiller_LGA | 来源:发表于2018-08-12 23:43 被阅读0次

jq实现全选和全不选
全选全不选实现
全选/全不选js
jq 全选全不选的小demo
全选，全不选，反选，全选/全不选
vue 实现全选全不选
DOM实现全选全不选
JQuery CheckBox
day10-作业
全选,全不选,反选

jq实现全选和全不选

详细代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            
            /**
             * 全选和全不选
             */
            $("#checkAll").click(function() {
                    

                if(this.checked == true) {
                    $("input[name='subBox']").each(function() {
                        this.checked = true;
                    })
                }
                
                if(this.checked == false){
                    $('input[name="subBox"]').each(function(){
                        this.checked = false;
                            
                    })
                }

            });
            
            /**
             * 显示选中的值
             */
            $("#btn1").click(function(){
                
                $('input[name="subBox"]:checked').each(function(){
                    // alert($(this).val())
                     alert(this.value)
                })
            })
            
        });
    </script>

    </head>

    <body>
        <div>
            <input id="checkAll" type="checkbox" value="111"/>全选<br />
            <input name="subBox" type="checkbox" value="01"/>项1<br />
            <input name="subBox" type="checkbox" value="02"/>项2<br />
            <input name="subBox" type="checkbox" value="03"/>项3<br />
            <input name="subBox" type="checkbox" value="04"/>项4<br />
            <input name="subBox" type="checkbox" value="05"/>项5<br />
            <input name="subBox" type="checkbox" value="06"/>项6<br />
        </div>

        <button id="btn1">提交</button>
    </body>

</html>

效果图：

267CFC94-E868-4B8A-906D-A30F37CFF69D.GIF