Jquery chọn tất cả các hộp kiểm trong bảng

Tôi có một tập lệnh sẽ kiểm tra tất cả các hộp kiểm trong bảng. Nó kiểm tra tất cả lần đầu tiên, nó bỏ chọn chúng sau đó. Tuy nhiên, khi tôi cố gắng kiểm tra lại thì không có gì xảy ra.Jquery chọn tất cả các hộp kiểm trong bảng

các jquery:

$('#selectAll').click(function(e){ 
    var table= $(e.target).closest('table'); 
    $('td input:checkbox',table).attr('checked',e.target.checked); 
});

HTML:

<table> 
    <tr> 
     <th> 
      <input type="checkbox" id="selectAll" /> 
     </th> 
     <th> 
      hi! 
     </th> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" id="1"/> 
     </td> 
     <td> 
      hi! 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" id="2"/> 
     </td> 
     <td> 
      hi! 
     </td> 
    </tr> 
</table>

đây là một fiddle của hành vi:

http://jsfiddle.net/EEJrU/

Tại sao nó không làm việc, kể được nhấp một lần?

Nguồn

2013-10-03 Snowburnt

Nó hoạt động với mã của bạn như đó là nếu bạn sử dụng JQuery 1.7.2 thay vì 1.10.1 –

Bạn cần phải sử dụng .prop() thay vì .attr()

$('#selectAll').click(function(e){ 
    var table= $(e.target).closest('table'); 
    $('td input:checkbox',table).prop('checked',this.checked); 
});

Demo: Fiddle

Attributes vs. Properties

Nguồn

2013-10-03 16:52:37

Tôi biết nó là một cái gì đó đơn giản! Cảm ơn! – Snowburnt

Đẹp, ngắn gọn, mã di động. +1 Lưu ý rằng tôi gặp sự cố khi chọn hộp kiểm "chọn tất cả" sau sự kiện nhấp chuột, vì vậy tôi phải thêm dòng sau vào hàm: e.stopPropagation(); – wloescher

Để kích hoạt sự kiện thay đổi trên tất cả các hộp kiểm khác bạn nên thêm .change() vào cuối dòng. Như trong: $ ('td input: checkbox', table) .prop ('checked', this.checked) .change(); – Luk6e

Điều này có thể hữu ích về sự khác biệt giữa prop() và attr(). Lưu ý dòng này trong bài viết này .prop() vs .attr():

"Giá trị thuộc tính phản ánh mặc định thay vì trạng thái hiển thị hiện tại (ngoại trừ một số phiên bản cũ hơn của IE, do đó làm cho mọi việc vẫn khó hơn). hộp kiểm trên trang được chọn. "

Vì vậy, nói chung, hãy sử dụng lệnh prop() thay vì attr().

Nguồn

2013-10-03 17:16:35 shenge86

<HTML> 
    <HEAD> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

    </HEAD> 
    <BODY> 

    <table border="1"> 
    <tr> 
     <th><input type="checkbox" id="selectall"/></th> 
     <th>Cell phone</th> 
     <th>Rating</th> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td> 
     <td>BlackBerry Bold 9650</td> 
     <td>2/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td> 
     <td>Samsung Galaxy</td> 
     <td>3.5/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td> 
     <td>Droid X</td> 
     <td>4.5/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td> 
     <td>HTC Desire</td> 
     <td>3/5</td> 
    </tr> 
    <tr> 
     <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td> 
     <td>Apple iPhone 4</td> 
     <td>5/5</td> 
    </tr> 
    </table> 

    </BODY> 
    </HTML> 




<script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 
      oTable = $('#datatable').dataTable({ 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers" 
      }); 

      $("#selectall").click(function() { 
       var checkAll = $("#selectall").prop('checked'); 
        if (checkAll) { 
         $(".case").prop("checked", true); 
        } else { 
         $(".case").prop("checked", false); 
        } 
       }); 

      $(".case").click(function(){ 
       if($(".case").length == $(".case:checked").length) { 
        $("#selectall").prop("checked", true); 
       } else { 
        $("#selectall").prop("checked", false); 
       } 

      }); 
     }); 




    </script>

Nguồn

2014-06-04 05:14:56

Có vẻ như nó sẽ hoạt động, nhưng nó quá mức. Bạn không cần phải đặt câu lệnh if để xác định xem bạn có muốn tất cả các hộp được chọn hay không, bạn chỉ cần tất cả các hộp để khớp với selectAll. Tôi làm như vậy có kiểm tra để sửa đổi tình trạng kiểm tra của tất cả các lựa chọn nếu ai đó chọn tất cả trên riêng của họ mặc dù. – Snowburnt

giải pháp jQuery đơn giản, với phát hiện đầu vào kiểm tra bên trong của bảng, và thay đổi trạng thái cho chính (SelectAll) hộp kiểm:

<table class="table"> 
    <thead> 
     <tr> 
      <th> 
       <div class="checkbox"> 
        <input type="checkbox" id="selectAll"> 
        <label for="selectAll"></label> 
       </div> 
      </th> 
      <th>Email</th> 
      <th>Join date <i class="arrow bottom"></i></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="active"> 
      <td> 
       <div class="checkbox"> 
        <input type="checkbox" id="tr-checkbox1"> 
        <label for="tr-checkbox1"></label> 
       </div> 
      </td> 
      <td>[email protected]</td> 
      <td>21 Oct, 2016 at 11:29 pm</td> 
     </tr> 
     <tr> 
      <td> 
       <div class="checkbox"> 
        <input type="checkbox" id="tr-checkbox2"> 
        <label for="tr-checkbox2"></label> 
       </div> 
      </td> 
      <td>[email protected]</td> 
      <td>21 Oct, 2016 at 11:29 pm</td> 
     </tr> 
    </tbody> 
</table>  

$(document).ready(function() { 
    var $selectAll = $('#selectAll'); // main checkbox inside table thead 
    var $table = $('.table'); // table selector 
    var $tdCheckbox = $table.find('tbody input:checkbox'); // checboxes inside table body 
    var $tdCheckboxChecked = []; // checked checbox arr 

    //Select or deselect all checkboxes on main checkbox change 
    $selectAll.on('click', function() { 
     $tdCheckbox.prop('checked', this.checked); 
    }); 

    //Switch main checkbox state to checked when all checkboxes inside tbody tag is checked 
    $tdCheckbox.on('change', function(){ 
     $tdCheckboxChecked = $table.find('tbody input:checkbox:checked');//Collect all checked checkboxes from tbody tag 
     //if length of already checked checkboxes inside tbody tag is the same as all tbody checkboxes length, then set property of main checkbox to "true", else set to "false" 
     $selectAll.prop('checked', ($tdCheckboxChecked.length == $tdCheckbox.length)); 
    }) 
});

Demo: jsfiddle

Nguồn

2017-01-07 08:12:02 ykosinets

Jquery chọn tất cả các hộp kiểm trong bảng

Trả lời

Các vấn đề liên quan