1

I've a simple Select/Deselect option to check and uncheck checkboxes in my page. It works well, but only once. I don't know what's the problem for!
Please take a look at my codes. You can see its demo here.

HTML codes: 

<input type="checkbox" id="main" />Select All<br />
<input type="checkbox" class="options" />Item 1<br />
<input type="checkbox" class="options" />Item 2<br />
<input type="checkbox" class="options" />Item 3<br />
<input type="checkbox" class="options" />Item 4<br />

jQuery code: 

$('#main').click(function(e) {
    $('.options').attr('checked', this.checked);
});
Zeta
  • 103,620
  • 13
  • 194
  • 236
Mohammad Saberi
  • 12,864
  • 27
  • 75
  • 127

1 Answers1

3

You need to use .prop() instead of .attr()

Use

$('.options').prop('checked', this.checked);

A Good Read .prop() vs .attr()

Community
  • 1
  • 1
Satpal
  • 132,252
  • 13
  • 159
  • 168
  • Thank you @Satpal. It solved the problem. May you tell me what is difference between prop and attr here ? – Mohammad Saberi Jul 23 '14 at 12:34
  • @MohammadSaberi, You should read http://stackoverflow.com/questions/5874652/prop-vs-attr as mentioned in answer. As `checked` is a property you should use the said method – Satpal Jul 23 '14 at 12:35