简单的全选框练习，必看

功能介绍：选中全选框按钮则所有的子框设为选中状态，反选则取消选中。

全选

<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=[]

    //当点击 全选 checkbox 
    $("#all").click(function(){
        // 获取 checked 值 
       var val =$(this).prop("checked") ; // true /false

       // 获取 ul 中 所有checkbox 。 循环 赋值 == 全选框的 checked值
          $("#ul :checkbox").each(function(i,v){
                $(v).prop("checked",val)

                // 如果 选中 
                if( val == true ){
                    // 将 checkbox 的value 值 push 到 数组
                    checkedVal.push( $(v).val() )
                }else{
                    checkedVal=[];
                }
               
          })
    })


    

    $(".checkone").click(function(){
        var val= $(this).prop("checked"); //true
       
        var value=$(this).val()
        var index= checkedVal.findIndex(function(v){
            return v == value
        })

        if(val == true){
            checkedVal.push( $(this).val() )
        }else{

            checkedVal.splice( index , 1 )
        }

        console.log(checkedVal)

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

</script>