继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

杜发明
关注TA
已关注
手记 9
粉丝 60
获赞 333
<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>
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP