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

Adding checkbox to collapsible list header in jquery mobile

本文关键字：可折叠 列表 标题 mobile 复选框 添加 jquery      更新时间：2023-09-26

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

我的客户端需要在标题中有一个复选框，这样用户就可以在不打开列表的情况下检查列表。我试着把它放在里面，但效果不好。复选框出现，但无法单击。我在谷歌上搜索了很多，但找不到解决方案。希望你们能帮助我。。。。。

这应该可以工作。如果你有不止一个，一定要给你的复选框一个唯一的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>
相关文章：