Question

I am using this plugin to give checkboxes and iOS look and feel:
http://ios-checkboxes.awardwinningfjords.com/

Apparently, it doesn’t touch the hidden checkbox input value when I use Chrome or Firefox DOM inspector. It always remains the same although it works perfectly after submiting the form detecting the defined state. (I don’t know how it does it…)

Currently I am using some input selects and depending on the value (yes or no) it shows another element:

Html:

<select name="announcement" id="announcement">
    <option value="0">No</option> 
    <option value="1">Yes</option>
</select>

jQuery change detection:

$('#announcement').change(function(){
    if($(this).val() == 0 ){
        $('#listOfCompanies').show();
    }else{
        $('#listOfCompanies').hide();
    }
});

Now, i converted the first select into a checkbox like this:

<input type="checkbox" name="announcement" value="1" id="announcement">

Is there any way I could detect the checkbox value when I use iOS plugin?

$('#announcement').change(function(){ doesn’t work as the checkbox value doesn’t change anymore in the DOM element.

Answer 1

If you look at the jquery-demo html that comes with the download, it shows an example of how to bind the onchange event handler.

$('#announcement').iphoneStyle({
    onChange: function(elem, value) { 
      // not sure what comes up as the arguments passed in.. but to find out you can do console.log(arguments)
      $('#listOfCompanies').toggle(!value);
    }
});

EDIT:

Try passing your checked/unchecked label options at the same time

$('#announcement').iphoneStyle({
    checkedLabel: 'your checked label',
    uncheckedLabel: 'your unchecked label',
    onChange: function(elem, value) { 
      // not sure what comes up as the arguments passed in.. but to find out you can do console.log(arguments)
      $('#listOfCompanies').toggle(!value);
    }
});