Materialize: How correctly change checkbox values using jQuery?

Created on 6 Nov 2015  路  2Comments  路  Source: Dogfalo/materialize

For example, I want to checked/unchecked all item by <input type="checkbox" id="all" />. In my case, checked attribute is changed but it does not display (http://jsfiddle.net/Lvmy64w0/2/)

  <form action="#">
    <p>
      <input type="checkbox" id="all" />
      <label for="all">SelectAll</label>
    </p>
    <p>
      <input class="item" type="checkbox" id="test5" />
      <label for="test5">Red</label>
    </p>
    <p>
      <input class="item" type="checkbox" id="test6" checked="checked" />
      <label for="test6">Yellow</label>
    </p>
    <p>
      <input type="checkbox" class="filled-in item" id="filled-in-box" checked="checked" />
      <label for="filled-in-box">Filled in</label>
    </p>
    <p>
      <input type="checkbox" id="test7" checked="checked" disabled="disabled" class="item" />
      <label for="test7">Green</label>
    </p>
      <p>
        <input type="checkbox" id="test8" disabled="disabled" class="item" />
        <label for="test8">Brown</label>
    </p>
  </form>
$(function(){
    $("#all").click(function () {
          $('.item').attr('checked', this.checked);
    });
});

Most helpful comment

Hello @uralbash

Try using prop, instead of attr:

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

I have updated your fiddle so you can check it.
http://jsfiddle.net/Lvmy64w0/3/

For more information check this:
http://api.jquery.com/prop/

All 2 comments

Hello @uralbash

Try using prop, instead of attr:

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

I have updated your fiddle so you can check it.
http://jsfiddle.net/Lvmy64w0/3/

For more information check this:
http://api.jquery.com/prop/

@Nohinn Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

heshamelmasry77 picture heshamelmasry77  路  3Comments

ReiiYuki picture ReiiYuki  路  3Comments

Robouste picture Robouste  路  3Comments

SoproniOli713 picture SoproniOli713  路  3Comments

locomain picture locomain  路  3Comments