idmean idmean - 1 year ago 220
jQuery Question

Check/Uncheck all checkboxes in jquery mobile fails

I have a jquerymobile page with two buttons. One two check all checkboxes and one to uncheck all checkboxes. First time I click on

check all
it works, but after unchecking it doesn't works anymore.

Here is my code:

<div data-role="page" id="selecttest">

<div data-role="header">
<a href="#sc" data-icon="home">SSC</a>
</div><!-- /header -->

<div data-role="content">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button onclick="$('#selecttest input[type=checkbox]').attr('checked','checked').checkboxradio('refresh');" data-theme="b">check all</button></div>
<div class="ui-block-b"><button onclick="$('#selecttest input[type=checkbox]').removeAttr('checked').checkboxradio('refresh');" data-theme="b">uncheck all</button></div>
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
<label for="checkbox-v-2a">One</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
<label for="checkbox-v-2b">Two</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
<label for="checkbox-v-2c">Three</label>
</div><!-- /page -->

I'm using jQuery 1.9.1 with jQuerymobile 1.3

I've already taken a look at How to select or unselect all checkboxes in JQuery Mobile? but it hasn't helped me.

Answer Source

jQuery 1.9 re-instated the changes that were done to .attr in 1.6 and removed in 1.6.1. This means that the .attr vs .prop is now back to being strict. If you need to manipulate properties, use .prop, else, use .attr. It's very rare that you actually would want to work with the attribute.

For checked state of a checkbox, you should be using .prop("checked",true) or .prop("checked",false)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download