Chọn tất cả các hộp kiểm với jQuery

Question

Tôi cần trợ giúp với bộ chọn jQuery. Giả sử tôi có đánh dấu như được hiển thị bên dưới:

<form> 
    <table> 
     <tr> 
      <td><input type="checkbox" id="select_all"/></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="select[]"/></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="select[]"/></td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" name="select[]"/></td> 
     </tr> 
    </table> 
</form> 

Cách nhận tất cả các hộp kiểm ngoại trừ #select_all khi người dùng nhấp vào hộp kiểm?
Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Một hoàn chỉnh hơn ví dụ sẽ hoạt động trong trường hợp của bạn:

$('#select_all').change(function() { 
    var checkboxes = $(this).closest('form').find(':checkbox'); 
    checkboxes.prop('checked', $(this).is(':checked')); 
}); 

Khi hộp kiểm #select_all được nhấp, trạng thái của hộp kiểm được chọn và tất cả các hộp kiểm trong biểu mẫu hiện tại được đặt thành cùng trạng thái.

Lưu ý rằng bạn không cần phải loại trừ hộp kiểm #select_all khỏi lựa chọn vì sẽ có cùng trạng thái như tất cả những người khác. Nếu bạn đối với một số lý do cần phải loại trừ #select_all, bạn có thể sử dụng này:

var checkboxes = $(this).closest('form').find(':checkbox').not($(this)); 

Answer 2

$("form input[type='checkbox']").attr("checked" , true); 

hoặc bạn có thể sử dụng

:checkbox Selector

$("form input:checkbox").attr("checked" , true); 

Tôi đã viết lại HTML của bạn và cung cấp một handler nhấp chuột cho vào hộp kiểm chính

$(function(){ 
    $("#select_all").click(function() { 
     $("#frm1 input[type='checkbox'].child").attr("checked", $(this).attr("checked")); 
    }); 
}); 

<form id="frm1"> 
    <table> 
     <tr> 
      <td> 
       <input type="checkbox" id="select_all" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="select[]" class="child" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="select[]" class="child" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" name="select[]" class="child" /> 
      </td> 
     </tr> 
    </table> 
</form> 

Answer 3

$('.checkall').change(function() { 
    var checkboxes = $(this).closest('table').find('td').find(':checkbox'); 
    if($(this).is(':checked')) { 
     checkboxes.attr('checked', 'checked'); 
    } else { 
     checkboxes.removeAttr('checked'); 
    } 
}); 

Answer 4

đơn giản và sạch

$('#select_all').click(function() { 
    var c = this.checked; 
    $(':checkbox').prop('checked',c); 
}); 

Answer 5

$(function() { 
$('#select_all').click(function() { 
    var checkboxes = $(this).closest('form').find(':checkbox'); 
    if($(this).is(':checked')) { 
     checkboxes.attr('checked', 'checked'); 
    } else { 
     checkboxes.removeAttr('checked'); 
    } 
}); 
    }); 

Answer 6

$(document).ready(function(){ 
    $("#select_all").click(function(){ 
     var checked_status = this.checked; 
     $("input[name='select[]']").each(function(){ 
     this.checked = checked_status; 
     }); 
    }); 
    }); 

Answer 7

câu trả lời trên sẽ không làm việc trong Jquery 1,9+ vì phương thức attr(). Sử dụng prop() thay vì:.

$(function() { 
    $('#select_all').change(function(){ 
     var checkboxes = $(this).closest('form').find(':checkbox'); 
     if($(this).prop('checked')) { 
      checkboxes.prop('checked', true); 
     } else { 
      checkboxes.prop('checked', false); 
     } 
    }); 
}); 

Answer 8

$("#select_all").live("click", function(){ 
      $("input").prop("checked", $(this).prop("checked")); 
    } 
    }); 

Answer 9

$ ("# select_all") thay đổi (function() {

$ ('input [type = "checkbox"]') chống đỡ (. "đã chọn", $ (this) .prop ("checked"));

});

Answer 10

Tôi hiện là một phần của phong cách này.

Tôi đã đặt tên cho biểu mẫu của bạn và thêm 'onClick' vào hộp select_all của bạn.

Tôi cũng đã loại trừ hộp kiểm 'select_all' khỏi bộ chọn jquery để giữ cho internet không phát sinh khi ai đó nhấp vào nó.

function toggleSelect(formname) { 
    // select the form with the name 'formname', 
    // then all the checkboxes named 'select[]' 
    // then 'click' them 
    $('form[name='+formname+'] :checkbox[name="select[]"]').click() 
} 

---

<form name="myform"> 
    <tr> 
     <td><input type="checkbox" id="select_all"  
        onClick="toggleSelect('myform')" /> 
     </td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="select[]"/></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="select[]"/></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="select[]"/></td> 
    </tr> 
</table> 

Answer 11

Dưới đây là một plugin cơ bản jQuery Tôi đã viết rằng sẽ chọn tất cả các hộp kiểm tra trên trang web, ngoại trừ hộp kiểm/yếu tố đó được sử dụng như chuyển đổi:

(function($) { 
    // Checkbox toggle function for selecting all checkboxes on the page 
    $.fn.toggleCheckboxes = function() { 
     // Get all checkbox elements 
     checkboxes = $(':checkbox').not(this); 

     // Check if the checkboxes are checked/unchecked and if so uncheck/check them 
     if(this.is(':checked')) { 
      checkboxes.prop('checked', true); 
     } else { 
      checkboxes.prop('checked', false); 
     } 
    } 
}(jQuery)); 

Sau đó, chỉ cần gọi hàm trên hộp kiểm hoặc phần tử nút của bạn:

// Check all checkboxes 
$('.check-all').change(function() { 
    $(this).toggleCheckboxes(); 
}); 

Answer 12

jQuery(document).ready(function() { 
     jQuery('.select-all').on('change', function() { 
      if (jQuery(this).is(':checked')) { 
       jQuery('input.class-name').each(function() { 
        this.checked = true; 
       }); 
      } else { 
       jQuery('input.class-name').each(function() { 
        this.checked = false; 
       }); 
      } 
     }); 
    }); 

Answer 13

Mã này hoạt động tốt với tôi

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#select_all").change(function(){ 
    $(".checkbox_class").prop("checked", $(this).prop("checked")); 
    }); 
}); 
</script> 

bạn chỉ cần thêm lớp checkbox_class cho tất cả các hộp kiểm

Dễ dàng và đơn giản: D

Answer 14

Đối mặt với vấn đề này , không có câu trả lời nào ở trên không hoạt động. Lý do là trong jQuery plugin Uniform (làm việc với theme metronic) .Tôi hy vọng câu trả lời sẽ có ích :)

Làm việc với jQuery Uniform

$('#select-all').change(function() { 
    var $this = $(this); 
    var $checkboxes = $this.closest('form') 
     .find(':checkbox'); 

    $checkboxes.prop('checked', $this.is(':checked')) 
     .not($this) 
     .change(); 
}); 

Answer 15

Một hộp kiểm để cai trị tất cả đều là

Đối với những người vẫn đang tìm kiếm cho plugin để kiểm soát hộp kiểm thông qua một hộp có trọng lượng nhẹ, có hỗ trợ out-of-the-box cho UniformJS và iCheck và không được chọn khi ít nhất một hộp kiểm được kiểm soát (và được kiểm tra khi tất cả các hộp kiểm được kiểm tra). đã tạo một jQuery checkAll plugin.

Hãy kiểm tra các ví dụ trên documentation page.

---

Ví dụ câu hỏi này tất cả các bạn cần làm là:

$('#select_all').checkall({ 
    target: 'input[type="checkbox"][name="select"]' 
}); 

Mà không phải là rõ ràng và đơn giản?