jQuery复选框实现全选和不全选

一，导入jQuery.js

 <script src="jquery-3.5.1.js"></script>

二，html布局的实现

  <h1>全选<input type="checkbox" id="all"></h1>
    <ul id="ul">
        <li>
            <input type="checkbox" value="11" class="checkone">
            <span>商品名1</span>
        </li>
        <li>
            <input type="checkbox" value="22" class="checkone">
            <span>商品名2</span>
        </li>
    </ul>

 <script>
            var checkedVal=[];
        //当点击时全选
        $("#all").click(function(){
     
            var val=$(this).prop("checked");
            
            //获取 ul中所有的checkbox  
            console.log("111",val);
            $("#ul :checkbox").each(function(i,v){
     
               $(v).prop("checked",val);
               // 如果 选中 
                if (val==true) {
     
            // 将 checkbox 的value 值 push 到 数组
                    checkedVal.push($(v).val())
                    console.log("asd",$(v).val());              
                }else{
     
                    checkedVal=[];
                }
            })

        })
        //获取属性为checkone的标签点击事件
        $(".checkone").click(function(){
     
            var val=$(this).prop("checked");//true
            console.log(val);

            var value=$(this).val();
            console.log(value);
            
            var index=checkedVal.findIndex(function(v){
     
                return v===value;
            })

            if (val==true) {
     
                checkedVal.push($(this).val())
            }else{
     
                checkedVal.splice(index,1)

            }
            
            if (checkedVal.length==$("#ul :checkbox").length) {
     
                $("#all").prop("checked",true)
            }else{
     
                $("#all").prop("checked",false);
            }

        })


    </script>