jQuery Mobile 滑动 li 检查隐藏的复选框答案

【问题标题】：jQuery Mobile swipe li to check hidden checkboxjQuery Mobile 滑动 li 检查隐藏的复选框
【发布时间】：2012-02-22 12:06:54
【问题描述】：

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

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

【问题讨论】：

标签： css input jquery-mobile checkbox swipe

【解决方案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/

【讨论】：