Выбрать все флажки с помощью JQuery

Question

я следующий HTML-код:

<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> 

Когда пользователь проверяет ckbCheckAll все флажки должны быть проверены. Кроме того, я следующий код JQuery:

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

Когда я вижу мою страницу в браузере, я получаю следующий результат: В первом щелчке ckbCheckAll все галочки были проверены на (что правильно). Во втором клике по ckbCheckAll все флажки сняты (это верно). Но в 3-й попытке ничего не произошло! также в 4-й попытке ничего не произошло и так далее.

Где проблема?

Answer 1

Использование проп

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

или снимите флажок:

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

http://jsfiddle.net/sVQwA/

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

Обновлено JSFiddle Ссылка: http://jsfiddle.net/sVQwA/1/

Answer 2

использование этого

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

также вы можете использовать prop пожалуйста, проверьте http://api.jquery.com/prop/

Answer 3

Используйте опору() вместо этого -

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

НО мне нравится @ гораздо более компактный ответ ДМК и +1:

Answer 4

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

OR

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

Answer 5

Попробуйте

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

Это должно сделать это :)

Answer 6

Использование ниже код ..

 $('#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

Вот простой способ сделать это:

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

Пусть у меня есть следующие флажки

<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 

Вот простой код, чтобы выбрать все и diselect все, когда флажок SelectAll нажмут

<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

Попробуйте следующий простой код:

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

Источник: How to reset all checkboxes using jQuery or pure JS?