Chọn tất cả hộp kiểm sử dụng jQuery

Question

Tôi đã mã html sau:

<input type="checkbox" id="ckbCheckAll" /> 
    <p id="checkBoxes"> 
     <input type="checkbox" class="checkBoxClass" id="Checkbox1" /> 
     <br /> 
     <input type="checkbox" class="checkBoxClass" id="Checkbox2" /> 
     <br /> 
     <input type="checkbox" class="checkBoxClass" id="Checkbox3" /> 
     <br /> 
     <input type="checkbox" class="checkBoxClass" id="Checkbox4" /> 
     <br /> 
     <input type="checkbox" class="checkBoxClass" id="Checkbox5" /> 
     <br /> 
    </p> 

Khi người dùng kiểm tra ckbCheckAll tất cả các hộp kiểm tra phải được kiểm tra. Ngoài ra tôi đã theo mã jquery:

$(document).ready(function() { 
     $("#ckbCheckAll").click(function() { 
      $(".checkBoxClass").attr('checked', this.checked); 
     }); 
    }); 

Khi tôi nhìn thấy trang web của tôi trong trình duyệt tôi nhận được kết quả sau: Trong nhấp chuột đầu tiên trên ckbCheckAll tất cả các hộp kiểm đã được kiểm tra (đó là chính xác). Trong lần nhấp thứ hai trên ckbCheckAll tất cả các hộp kiểm đã được bỏ chọn (điều này là chính xác). Nhưng trong nỗ lực thứ 3 không có gì xảy ra! cũng trong nỗ lực thứ 4 không có gì xảy ra và vân vân.

Sự cố ở đâu?

Answer 1

Sử dụng chống đỡ

$(".checkBoxClass").prop('checked', true); 

hoặc bỏ chọn:

$(".checkBoxClass").prop('checked', false); 

http://jsfiddle.net/sVQwA/

$("#ckbCheckAll").click(function() { 
    $(".checkBoxClass").prop('checked', $(this).prop('checked')); 
}); 

Cập nhật JSFiddle Link: http://jsfiddle.net/sVQwA/1/

Answer 2

sử dụng này

if (this.checked) 
    $(".checkBoxClass").attr('checked', "checked"); 
else 
    $(".checkBoxClass").removeAttr('checked'); 

bạn cũng có thể sử dụng prop hãy kiểm tra http://api.jquery.com/prop/

Answer 3

Sử dụng prop() thay vì -

$(document).ready(function() { 
     $("#ckbCheckAll").click(function() { 
      $(".checkBoxClass").each(function(){ 
       if($(this).prop("checked", true)) { 
        $(this).prop("checked", false); 
       } else { 
        $(this).prop("checked", true); 
       }     
      }); 
     }); 
    }); 

NHƯNG Tôi thích @ trả lời nhiều nhỏ gọn hơn DMK và nhấp vào nút +1

Answer 4

$(document).ready(function() { 
    $('#ckbCheckAll').click(function() { 
     $('.checkBoxClass').each(function() { 
      $(this).attr('checked',!$(this).attr('checked')); 
     }); 
    }); 
}); 

HOẶC

$(function() { 
    $('#ckbCheckAll').toggle(
     function() { 
      $('.checkBoxClass').prop('checked', true); 
     }, 
     function() { 
      $('.checkBoxClass').prop('checked', false); 
     } 
    ); 
}); 

Answer 5

Hãy thử điều này

$(document).ready(function() { 
    $("#ckbCheckAll").click(function() { 
     $("#checkBoxes input").prop('checked', $(this).prop('checked')); 
    }); 
}); 

Điều đó sẽ làm điều đó :)

Answer 6

Sử dụng mã dưới đây ..

 $('#globalCheckbox').click(function(){ 
      if($(this).prop("checked")) { 
       $(".checkBox").prop("checked", true); 
      } else { 
       $(".checkBox").prop("checked", false); 
      }     
     }); 


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

Answer 7

Đây là một cách đơn giản để làm điều này:

Html:

<input type="checkbox" id="selectall" class="css-checkbox " name="selectall"/>Selectall<br> 
<input type="checkbox" class="checkboxall" value="checkbox1"/>checkbox1<br> 
<input type="checkbox" class="checkboxall" value="checkbox2"/>checkbox2<br> 
<input type="checkbox" class="checkboxall" value="checkbox3"/>checkbox3<br> 

jquery:

$(document).ready(function(){ 
$("#selectall").click(function(){ 
     //alert("just for check"); 
     if(this.checked){ 
      $('.checkboxall').each(function(){ 
       this.checked = true; 
      }) 
     }else{ 
      $('.checkboxall').each(function(){ 
       this.checked = false; 
      }) 
     } 
    }); 
}); 

Answer 8

$(document).ready(function(){ 
$('#ckbCheckAll').click(function(event) { 
      if($(this).is(":checked")) { 
       $('.checkBoxClass').each(function(){ 
        $(this).prop("checked",true); 
       }); 
      } 
      else{ 
       $('.checkBoxClass').each(function(){ 
        $(this).prop("checked",false); 
       }); 
      } 
    }); 
    }); 

Answer 9

$(document).ready(function() { 
    $(".class").on('click', function() { 
     $(".checkbox).prop('checked', true); 
    }); 
}); 

Answer 10

Hãy i có các hộp kiểm sau

<input type="checkbox" name="vehicle" value="select All" id="chk_selall">Select ALL<br> 
     <input type="checkbox" name="vehicle" value="Bike" id="chk_byk">bike<br> 
     <input type="checkbox" name="vehicle" value="Car" id="chk_car">car 
     <input type="checkbox" name="vehicle" value="Bike" id="chk_bus">Bus<br> 
     <input type="checkbox" name="vehicle" value="scooty" id="chk_scooty">scooty 

Đây là mã đơn giản để chọn tất cả và diselect tất cả khi SelectAll hộp kiểm sẽ nhấp

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#chk_selall").on("click", function() { 

       $("#chk_byk").prop("checked", true); 
       $("#chk_car").prop("checked", true); 
       $("#chk_bus").prop("checked", true); 
       $("#chk_scooty").prop("checked", true); 


      }) 

      $("#chk_selall").on("click", function() { 

       if (!$(this).prop("checked")) 
       { 
        $("#chk_byk").prop("checked", false); 
        $("#chk_car").prop("checked", false); 
        $("#chk_bus").prop("checked", false); 
        $("#chk_scooty").prop("checked", false);    

       } 
      }); 


     }); 
    </script> 

Answer 11

Hãy thử mã đơn giản sau đây:

$('input[type=checkbox]').each(function() { this.checked = true; }); 

Nguồn: How to reset all checkboxes using jQuery or pure JS?