Question

我希望在jQuery Mobile上使用swiperight来突出显示列表并检查其中的隐藏复选框。当我再次深入思考时，它将扭转行动。这是我到目前为止收集的内容：

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

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/

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

1 个答案: