CODEWITHSUNDEEP
javascriptjquery
Susheel Singh
Susheel Singh

Reputation: 3854

on('change') not working as expected

Below is my code which is working only one cycle of select all and deselect all. it works fine if I change the syntax to .change instead of .on('change'). Even .change works upto 1.8.3 version of jquery but not after that.

<div id="mainframe" align="center">
  <div align="left"><strong>Select All CheckBox Demo.</strong></div>
  <table border="0" cellpadding="5" cellspacing="1" class="table">
    <th><input type="checkbox" id="selectall"/></th>
    <th>Programming Language</th>
    <th>Rating</th>
    <tr>
      <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
      <td>PHP</td>
      <td>5</td>
    </tr>
    <tr>
      <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
      <td>JSP</td>
      <td>4</td>
    </tr>
    <tr>
      <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
      <td>ASP</td>
      <td>3</td>
    </tr>
  </table>
</div>

$("#selectall").on('change',function () {
  if($(this).is(":checked")){
    $('.case').attr('checked',true);
  }else{
    $('.case').attr('checked',false);
  }
});

Pen

Upvotes: 0

Views: 132

Answers (2)

PSL
PSL

Reputation: 123739

Issue is with the way attr is used. Simplify it using prop instead.

$(function(){
    $("#selectall").on('change',function () {
        $('.case').prop('checked', this.checked);
    });
});

Fiddle

Update based on your question in comment

Version 1.3.2 of jquery does not support on as well as prop. This is a very old version where attr itself probably handles specific attribute value (for element attribute) or boolean value (for element property) to add/remove attribute value (in case of attributes of this kind (checked, selected...)) or set or unset element property based on the type of value specified. Later version of jquery introduced prop for setting the element property and attr to set the element attribute. Probably this is the reason. Also note that on is not supported in 1.3.2 version of jquery.

Upvotes: 8

Moeri
Moeri

Reputation: 9294

You need to use either 

$('.case').attr('checked', 'checked');

or

$('.case').prop('checked', true);

Also, you can do this in one line of code:

$(function(){
    $("#selectall").on('change',function () {
        $('.case').prop('checked', $(this).is(":checked"));
    });
});

Here is a jsFiddle: http://jsfiddle.net/BWWph/

Upvotes: 6

Related Questions