Check if a JQuery mobile checkbox is checked

Question

I have a list of Checkboxes & I want to get the status of each one of them. The List is here :

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
       <input type="checkbox" name="Sunday" id="Sunday-1" class="custom" />
       <label for="Sunday-1">Sunday</label>
       <input type="checkbox" name="Monday" id="Monday-1" class="custom" />
       <label for="Monday-1">Monday</label>
       <input type="checkbox" name="Tuesday" id="Tuesday-1" class="custom" />
       <label for="Tuesday-1">Tuesday</label>
  </fieldset>
</div>

I usually Check the checkbox's status using this quote:

var isChecked = $('#CheckboxID').is(':checked');

But in my case now, is there a method to get the status of "Jquery Mobile" checkboxes all at once ?

A list as in an array? Or you want them appended to the document as a `
` etc? — Jasper Mogg, Jun 21 '12 at 13:11
From jquerymobile version 1.3, see answer in this question: http://stackoverflow.com/questions/15031831/check-uncheck-all-checkboxes-in-jquery-mobile-fails — Peacemoon, Aug 11 '13 at 07:16

Prasenjit Kumar Nag · Accepted Answer · 2012-06-21T13:41:26.167

27

You can do

var status = $('input[type="checkbox"]').filter('.custom').map(function(){
    return $(this).is(':checked') ? 1 : 0;

});

Then the status array will have an entry for each checkbox in the same order, 0 for unchecked and 1 for checked. It's not much of useful as you have no other information of the checkbox in the array.

If you want to perform operation based on the status you can use .each() instead, like

$('input[type="checkbox"]').filter('.custom').each(function(){
   if($(this).is(':checked')){
     // perform operation for checked
   }
   else{
     // perform operation for unchecked
   }

});

UPDATE

If you want to build an array of objects with the name and status of the checkboxes you can do that with

var status = $('input[type="checkbox"]').filter('.custom').map(function(){
    var name = $(this).attr('name'); 
    if($(this).is(':checked'))
         return { 'name':name, 'status' : 'Checked'}; 
    else
        return { 'name':name, 'status' : 'UnChecked'};

});

console.log(status);

Demo: http://jsfiddle.net/joycse06/rL3Ze/

Read more on .each() and .map()

edited Jun 21 '12 at 13:41

answered Jun 21 '12 at 13:14

Prasenjit Kumar Nag

13,391
3
45
57

1

That, fine sir, is a sexy answer. – Jasper Mogg Jun 21 '12 at 13:22
1

Thanks a million ... a very helpful answer. – Sana Joseph Jun 21 '12 at 13:36
@SanaJoseph, You are most welcome, Glad to be able to help. :) – Prasenjit Kumar Nag Jun 21 '12 at 13:37
I'm sorry, I have a question, when I use your code with jquery 1.7.1 it's not recognized & the status part is skipped, do you know what it the solution ? – Sana Joseph Jun 21 '12 at 14:23
1

@SanaJoseph, if you check console on this page http://jsfiddle.net/joycse06/rL3Ze/1/show/, you will see it's logging the objects and view the source, it's using `1.7.1` – Prasenjit Kumar Nag Jun 21 '12 at 14:26
It's working now, seems that there is something wrong with the library I have, thanks again, sorry to bother you. – Sana Joseph Jun 21 '12 at 14:38

score 3 · Answer 2 · answered Jun 21 '12 at 13:13

3

I have this code. I think you should adjust to your case.

  $('#formfriends input[type=checkbox]').each(function() {
    if ($(this).attr('checked'))
     //$(this).attr('disabled' , true);
     // do what you want here
  });

answered Jun 21 '12 at 13:13

Pedro Casado

1,705
1
21
43

score 3 · Answer 3 · answered Jun 21 '12 at 13:15

3

you can use jQuery each function http://api.jquery.com/jQuery.each/

.each function will help you to traverse through your checkboxes

answered Jun 21 '12 at 13:15

ersanbilik

51
3

score 2 · Answer 4 · answered Apr 05 '13 at 10:49

for jQm 1.3 i had to check for the class on the label in the wrapper div

ui-checkbox-off
ui-checkbox-on

samplecode (already rendered by jQm):

<div class="ui-checkbox">
  <label data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="a" data-mini="false" class="ui-checkbox-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-a">
    <span class="ui-btn-inner">
      <span class="ui-btn-text">
        myLabel
      </span>
      <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span>
    </span>
  </label>
  <input type="checkbox" name="flip-num" class="flip-num">
</div>

Check if a JQuery mobile checkbox is checked

4 Answers4

Linked