Check/Uncheck all checkboxes in jquery mobile fails

Question

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>
        <h1>...</h1>
    </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>
        <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>
        </fieldset>
    </div>
</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.

For starters I would highly recommend not using inline JavaScript — Matt Busche, Feb 22 '13 at 19:33
you should be using `.prop` to change checked status, not `.attr` — Kevin B, Feb 22 '13 at 19:45
It seems to work for me, here's a [jsBin](http://jsbin.com/ehujuf/1/edit). I think there is something else wrong with your code. — Jack, Feb 22 '13 at 19:45
@Jack That's interesting, it works with jQuery 1.6.4 (what your are using in your jsBin) but not with jQuery 1.9.1 (I've tried it out). — idmean, Feb 22 '13 at 19:47
@KevinB Thanks, you should post this as an answer. It solved my question! — idmean, Feb 22 '13 at 19:48
I'm with @KevinB and @Jack - you should be using `.prop` but the code runs on my local machine just fine — Matt Busche, Feb 22 '13 at 19:50
@wumm I actually just selected *latest JQM* in the jsBin and it added jQuery 1.6.4. — Jack, Feb 22 '13 at 19:56

score 10 · Accepted Answer · answered Feb 22 '13 at 19:51

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)

score 0 · Answer 2 · answered Sep 20 '16 at 23:36

$('h3 :checkbox').change(function(e) {
    e.preventDefault();

var tasiyici = "form1";

  if($(this).prop("checked")== true)
  {
  tumunuSec(tasiyici,true);
  }else{
  tumunuSec(tasiyici,false); 
  }


});

$('#form1 input[type=checkbox]').change(function(e) {
    e.preventDefault();
 var truesayisi = $("#form1 input[type=checkbox]:checked").size();
 var checksayisi = $("#form1 input[type=checkbox]").size();
  if(truesayisi == checksayisi)
  {
   $('h3 :checkbox').prop("checked",true);
  } 
  if(truesayisi < checksayisi)
  {
   $('h3 :checkbox').prop("checked",false);
  }
});

function tumunuSec(FormAdi, cvalue){
  var truesayisi = 0;
    $.each($("#"+FormAdi+" input[type=checkbox]"), function(){
        $(this).prop("checked",cvalue).checkboxradio("refresh");
  truesayisi++;

    });  


}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>


<div class="cont-a" style="min-width:280px !important; width:90% !important; max-width:380px !important;">
 <h3  style="padding:8px; margin:0px !important; background:#222; border-radius:4px; text-align:center;">
 <input type="checkbox" name="secici" id="secici" style="margin:0px;" class="tipso" title="Select All"><p>TOPLU İŞLEM</p></h3>
 <form action="kontrol.php" method="post" data-ajax="false" style="padding:0px; margin:0px;">
  <fieldset class="ui-field-contain" data-role="controlgroup" id="form1" data-filter="true" STYLE="width:100%; border:0px solid #ffcc00">
   <input type="checkbox" name="menuler[]" value="1" id="1">
   <label for="1">Menü 1</label>
   <input type="checkbox" name="menuler[]" value="2" id="2">
   <label for="2">Menü 2</label>
   <input type="checkbox" name="menuler[]" value="3" id="3">
   <label for="3">Menü 3</label>

  </fieldset>
    <div class="no-results" >Kayıt bulunamadı.</div> 
  <input type="submit" value="yolla" />
 </form>
</div>

Check/Uncheck all checkboxes in jquery mobile fails

2 Answers2

Linked