Skip to content Skip to sidebar Skip to footer

Check If A JQuery Mobile Checkbox Is Checked

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

Solution 1:

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()


Solution 2:

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
  });

Solution 3:

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

.each function will help you to traverse through your checkboxes


Solution 4:

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>

Post a Comment for "Check If A JQuery Mobile Checkbox Is Checked"