Search code examples
jqueryeventscheckboxprop

Jquery checkbox prop method with change event


I need do some actions with checkboxes which was checked from another checkbox. But it's doesn't work. Why? Simple example:

$('.tmp').click(function(){
  $('.quest:not(:checked)').prop('checked', true);  
});

$('.quest').change(function(){
  console.log(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="" id="" class="tmp"> Click me to see some magic... or not(
<br>

<input type="checkbox" name="" id="" class="quest">1
<input type="checkbox" name="" id="" class="quest">2
<input type="checkbox" name="" id="" class="quest">3
<input type="checkbox" name="" id="" class="quest">4
<input type="checkbox" name="" id="" class="quest">5
<input type="checkbox" name="" id="" class="quest">6
<input type="checkbox" name="" id="" class="quest">7
<input type="checkbox" name="" id="" class="quest">8
<input type="checkbox" name="" id="" class="quest">9
<input type="checkbox" name="" id="" class="quest">10


Solution

  • You need to manually trigger the change event using trigger method, for example:

    $('.quest:not(:checked)')
    .prop('checked', true) // updating prop but the change event is not fired
    .trigger('change'); // this line will trigger the change event on .quest