I'm trying to create a sliding checkbox like the one on the iphone.

I started with this script:

$('input[type=checkbox]').live('touchstart', function (e) {
            down_x = e.originalEvent.touches[0].pageX;
            $('input[type=checkbox]').live('touchmove', function (e) {up_x = e.originalEvent.touches[0].pageX;
            if ((down_x - up_x) > 1)  {$(this).change()}});
            });

But it does not seem to work. Any idea on how to implement this?

I'm trying to create a sliding checkbox like the one on the iphone.

I started with this script:

$('input[type=checkbox]').live('touchstart', function (e) {
            down_x = e.originalEvent.touches[0].pageX;
            $('input[type=checkbox]').live('touchmove', function (e) {up_x = e.originalEvent.touches[0].pageX;
            if ((down_x - up_x) > 1)  {$(this).change()}});
            });

But it does not seem to work. Any idea on how to implement this?

• javascript
• jquery
• iphone
• touch
• slide

1 Answer 1

this was a fun little problem

I got it working just fine, it even works with a mouse :)

I tested it on my Ipad and Iphone and it is pretty cool.

would not take much work to flip this into a plugin but this should work just fine for you

the trick with working with ios mobile events is these three events

$('.toggle_box').bind('touchstart',touch_start);
$('.toggle_box').bind('touchmove',touch_move);
$('.toggle_box').bind('touchend',slide_end);   

http://jsfiddle.net/samccone/ZMkkd/