手记

最简单,最正确的全选功能,一定适合你。

<body>
<input class="check" type="checkbox">产品一<br>
<input class="check" type="checkbox">产品二<br>
<input class="check" type="checkbox">产品三<br>
<input class="check" type="checkbox">产品四<br>
<input class="check" type="checkbox">产品五<br>
<input class="check" type="checkbox">产品六<br>
<input class="check" type="checkbox">产品七<br>
<input class="check" type="checkbox">产品八<br>
<input class="check" type="checkbox">产品九<br>
<input class="check" type="checkbox">产品十<br><br><br><br><br>

<input type="checkbox" id="allcheck">全选

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</body>
<script>
// 全选/反选,这块操作子input不影响全选框
$('#allcheck').click(function(){
    if(document.getElementById("allcheck").checked){
        var oneCheck = document.querySelectorAll(".check");
        for(var i=0;i<oneCheck.length;i++){
            oneCheck[i].checked = true;
        }
    }else{
        var oneCheck = document.querySelectorAll(".check");
        for(var i=0;i<oneCheck.length;i++){
            oneCheck[i].checked = false;
        }
    }

    // 此方法会有bug
    /*if(document.getElementById("allcheck").checked){
        $("[class='check']").attr("checked",true);
    }else{
        $("[class='check']").attr("checked",false);
    }*/
});
</script>
1人推荐
随时随地看视频
慕课网APP