jQuery Mobile swipe li to check hidden checkbox - css

Question

I am looking to swiperight on jQuery Mobile to highlight the list and check the hidden checkbox within. And when I swiperight again, it will reverse the action. Here's what I gathered so far:
HTML:
<ul data-role="listview">
<li>Deals<input type="checkbox"/></li>
</ul>
CSS:
input[type="checkbox"]
{
display:none;
}
Jquery:
$(document).ready(function() {
//Swipe
$("#searchPage li").live('swiperight', function(){
if($(this).children(':input:checkbox').is(':checked')){
$(this).css('background','orange');
$(this).children(':input:checkbox').click();
}else{
$(this).css('background', '');
$(this).children(':input:checkbox').click();
}
}
});//END ready

Answer 1

remove the <a> tag and check ......(i don't know the why it is. but working fine if <a> removed)
sample code :
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<div data-role="page" id="page">
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li id="listitem"> Deals<input id="checkbox" type="checkbox" /></li>
</ul>
</p>
</div>
</div>
</div>
​
and js code :
$(document).ready(function() {
$('#page').bind('swiperight', function(){
if($('#checkbox').is(':checked')){
$(this).css('background','orange');
$('#checkbox').click()
}else{
$(this).css('background', '');
$('#checkbox').click()
}
});
});//END ready​
sample example here :
http://jsfiddle.net/reddyprasad321/WmsjX/
http://jsfiddle.net/reddyprasad321/WmsjX/