css - jQuery Mobile 滑动 li 来检查隐藏的复选框

Question

我希望在 jQuery Mobile 上向右滑动以突出显示列表并选中其中隐藏的复选框。当我再次向右滑动时，它会反转 Action 。这是我到目前为止收集的内容:

HTML:

<ul data-role="listview">
   <li><a href="#resultPage">Deals<input type="checkbox"/></a></li>
</ul>

CSS:

input[type="checkbox"]
{
    display:none;
}

J查询:

   $(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

删除 <a>标记并检查......(我不知道为什么会这样。但如果删除 <a> 则工作正常)

示例代码:

<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>

和js代码:

  $(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​

示例在这里:

http://jsfiddle.net/reddyprasad321/WmsjX/

http://jsfiddle.net/reddyprasad321/WmsjX/