jQuery - toggle chọn tất cả các hộp kiểm

Question

Chiến đấu với một loạt các ví dụ và, là vẫn còn mới để jQuery/Javascript, không thể nhận được mã của tôi để hoạt động (ở đây tôi mẫu của tôi trong GSP):

<table> 
    <thead> 
    <tr> 
     <th><input type="checkbox" name="selectAll" onclick="selectAll(this.checked);"/></th> 
    </tr> 
    </thead> 
    <tbody> 
     <td> 
      <td><input type="checkbox" name="domainList" value="${domainInstance.id}"/></td> 
    </tbody> 
<table> 

Tôi có javascript sau đoạn trích trong GSP chính của tôi, mà các cuộc gọi mẫu:

function selectAll(status) { 

} 

làm thế nào để chọn tất cả các hộp kiểm từ tên SelectAll?

Answer 1

Vì bạn đang sử dụng jQuery, bạn nên sử dụng một trình xử lý onclick như dưới đây cho SelectAll.

$(':checkbox[name=selectAll]').click (function() { 
    $(':checkbox[name=domainList]').prop('checked', this.checked); 
}); 

Xin lưu ý rằng các mã trên sẽ xem xét toàn bộ dom cho checkbox với name=selectAll và thiết lập trạng thái của hộp kiểm với name=domainList.

Dưới đây là một phiên bản tốt hơn một chút với sự thay đổi đánh dấu nhỏ,

jsFiddle DEMO

$('#selectAllDomainList').click(function() { 
 
    var checkedStatus = this.checked; 
 
    $('#domainTable tbody tr').find('td:first :checkbox').each(function() { 
 
    $(this).prop('checked', checkedStatus); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<table id="domainTable"> 
 
    <!-- Added ID --> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     <!-- Added ID to below select box --> 
 
     <input type="checkbox" name="selectAll" id="selectAllDomainList" /> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="domainList" value="${domainInstance.id}" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="domainList" value="${domainInstance.id}" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="domainList" value="${domainInstance.id}" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="checkbox" name="domainList" value="${domainInstance.id}" /> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <table>

Answer 2

$("input:checkbox").prop("checked", status); 

Answer 3

để chọn tất cả các hộp kiểm tra với name = SelectAll và sửa status của họ, bạn có thể làm

function selectAll(status) { 
    $('input[name=selectAll]').each(function(){ 
     $(this).prop('checked', status); 
    }); 
}