首頁手記最簡單，最正確的全選功能，一定適合你。

最簡單，最正確的全選功能，一定適合你。

標簽：

Html/CSS JQuery JavaScript

<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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>

點擊查看更多內容