javascript - 在jquery mobile中将复选框添加到可折叠列表标题

Question

我在 jQuery Mobile 网站上遇到了一个问题。我正在开发一个带有可折叠列表 ( http://dev.sreejesh.in/jqmobile/inbox.html ) 的 jQuery 移动网站。

我的客户需要在标题内有一个复选框，以便用户可以在不打开列表的情况下检查列表。我试着把它放进去，但效果不好。复选框出现，但不可点击。我在谷歌搜索了很多，但找不到解决方案。希望你们能帮助我。请.....

Answer 1

这应该有效。如果您有多个复选框，请确保为您的复选框提供一个唯一的 ID。不要忘记复选框标签。

<div id="collapsibleSetWrapper" data-role="collapsible-set">
    <div data-role="collapsible" data-collapsed="true">
        <h3>
           <span>some title</span>
           <input class="mycheckbox" type="checkbox" id="uniqueID"/>
           <label for="uniqueID">&nbsp;</label>
        </h3>
        <div id="mycontent">
              <p>this is the content</p>
        </div>
    </div>
</div>

<script>    
$('#collapsibleSetWrapper .mycheckbox').checkboxradio({
    create: function(event,ui){
        var checkbox = $(event.target);
        var clickTarget = $(event.target).parent();
        $(clickTarget).click(function(e){
            if($(checkbox).is(':checked')){
                $(checkbox).attr("checked",false).checkboxradio("refresh");
                // select all the nested checkboxes here
            }
            else{
                $(checkbox).attr("checked",true).checkboxradio("refresh");
                // unselect all the nested checkboxes here
            }
            e.preventDefault();
            return false;
        });
    }
})
</script>