1. 程式人生 > >全選框與複選框聯動

全選框與複選框聯動

實現一個功能:點選全選框,所有複選框都選中或全不選中;只要有一個複選框不選中,全選框也不選中。

<script>
$(document).ready(function(){

    //全選框點選事件
    $("input[name=checkedAll]").click(function(){
        if($(this).prop("checked")){
            $("input[name=goodsChecked]").prop("checked",true);
        }else{
            $("input[name=goodsChecked]").prop("checked",false);
        }
    });

    //複選框與全選框聯動點選事件
    $("input[name=goodsChecked]").click(function(){
        var arr = $("input[name=goodsChecked]:checked");
        var length = $("input[name=goodsChecked]").length;
        if(arr.length == length){
            $("input[name=checkedAll]").prop("checked",true);
        }else{
            $("input[name=checkedAll]").prop("checked",false);
        }
    });

});
</script>

<body>
//複選框們
<input type="checkbox" name="goodsChecked">
<input type="checkbox" name="goodsChecked">
<input type="checkbox" name="goodsChecked">
//全選框
<input type="checkbox" name="checkAll">
</body>