jQuery iPhone Style Checkbox Events

I'm using the jQuery package located at http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html to convert my existing checkboxes to iPhone style checkboxes. The problem I'm having is that,after applying the jQuery/iPhone styles, my checkboxes' onclick events do not fire when the checkbox status changes. I need to be able to capture the onclick event and the id of the checkbox whose status changed? Any idea what I'm missing?开发者_开发知识库

Just do like that

html

<input type="checkbox" class="iphone-checkbox" id="checkbox-id">

javascript

$('.iphone-checkbox').iphoneStyle({onChange: function(elem, data) {alert(elem.attr('id')); alert(data);}});

In first alert message you will see

checkbox-id

And in the second

true/false (depends on whether checkbox checked or not)

What I ended up doing was adding a custom event to iphone-style-checkbox.js to do this. Look for this line

iOSCheckbox.prototype.didChange = function() {

then after they set the checked element on the checkbox

this.onChange(this.elem, this.elem.attr('checked'));

add:

this.elem.trigger("iphoneChange");

Then to bind to this event you'll just need to find your checkbox and call the jQuery bind function:

$('#checkbox').bind('iphoneChange', function(e, data) {...});

Was the only thing that worked for me.

Try Like

herejQuery('#checkbox_id').attr('checked',true); jQuery('#checkbox_id').trigger('change');

in the "iphone-style-checkboxes.js", the change event only binded.

I've had the same problem. I solved by adding the onChange option when initializing the checkbox, like so:

$(".iPhone").iphoneStyle({ onChange : changeHandler });

Hope this helps!

Try capturing the change event instead of the click event.

if you have any difficult to create iphone like toggle button using jquery please have a look here http://talkerscode.com/webtricks/iphone-like-slide-toggle-button-using-jquery-and-css.php it will definitely solve your problem

function on()
{
   $("#inner").animate({marginLeft:'50px'},function(){
     document.getElementById("choose").value="on";
     document.getElementById("wrapper").style.background="#04B404";
     document.getElementById("on").checked=true;
     document.getElementById("off").checked=false;
   });  
}

function off()
{
   $("#inner").animate({marginLeft:'0px'},function(){
     document.getElementById("choose").value="off";
     document.getElementById("wrapper").style.background="#E6E6E6"; 
     document.getElementById("off").checked=true;
     document.getElementById("on").checked=false;
   });
}

<div id="checkbox_div">
<input type="checkbox" id="on" value="ON">ON
<input type="checkbox" id="off" value="OFF">OFF
</div>