jQuery Mobile swipe li to check hidden checkbox

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><a href="#resultPage">Deals<input type="checkbox"/></a></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

score 0 · Answer 1 · answered Feb 22 '12 at 04:06

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/

jQuery Mobile swipe li to check hidden checkbox

1 Answers1