JavaScript多選框的全選與取消

lsch9594 9年前發布 | 4K 次閱讀 JavaScript

index.html            

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var checkbox = $('input[name=checkbox]');
        $('.selectAll').on("click",function(){
            checkbox.prop('checked', this.checked);
        });
        checkbox.on("click",function(){
            var _tmp = checkbox;
            $(".selectAll").prop('checked',_tmp.length == _tmp.filter(":checked").length);
        });
        //或者使用下述方法
        // checkbox.on("click",function(){
        //  var flag = true;
        //  checkbox.each(function(){
        //      if (!this.checked) {
        //          flag = false;
        //      };
        //  })
        //  if (flag) {
        //      $('.selectAll').prop('checked', true)
        //  }else{
        //      $('.selectAll').prop('checked', false)
        //  }
        // })
    })
    </script>
</head>
<body>
    <input type="checkbox" class="selectAll">全選/全不選<br/>
    <input type="checkbox" name="checkbox" /><br/>
    <input type="checkbox" name="checkbox" /><br/>
    <input type="checkbox" name="checkbox" /><br/>
    <input type="checkbox" name="checkbox" /><br/>
    <input type="checkbox" name="checkbox" /><br/>
    <input type="checkbox" name="checkbox" /><br/>
</body>
</html>
 本文由用戶 lsch9594 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！