jQuery Mobile - 过滤复选框的列表视图会导致出现无样式的复选框答案

【问题标题】：jQuery Mobile - Filtering a Listview of Checkboxes causes unstyled checkboxes to appearjQuery Mobile - 过滤复选框的列表视图会导致出现无样式的复选框
【发布时间】：2013-12-06 19:54:41
【问题描述】：

长期读者和第一次发帖，对 jQuery/jQM 来说有点新。

我有一个包含带有数据过滤器的 Listview 的表单，其中每个列表项都包含一个复选框。当我在过滤器框中输入内容并过滤项目时，背景中会出现额外的无样式复选框。以下是代码示例：

<div data-role="content">  
    <ul data-role="listview">
        <fieldset data-role="controlgroup" id="myGroup" data-filter="true" data-icon="false">                
            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="228"/>   
                <label for="228">
                    Orange
                </label>
            </li>   
            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="70"/>   
                <label for="70">
                    Red
                </label>
            </li>    
            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="71"/>   
                <label for="71">
                    Blue
                </label>
            </li>                

            <li>
                <input type="checkbox" 
                name="itemIds" 
                id="72"/>   
                <label for="72">
                    Purple
                </label>
            </li>                  
        </fieldset>
    </ul>
</div>

我最初认为问题在于我动态生成列表的方式（即我认为我一定得到了重复的复选框，因为未设置样式的复选框对应于我的列表中的项目），但我能够重现该问题在 jsfiddle 中使用上面的简单代码示例：http://jsfiddle.net/KsRb2/2/

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript jquery jquery-mobile checkbox jquery-mobile-listview

【解决方案1】：

这种行为是 jQM 1.4.0 alpha 2 中的一个错误。您应该更新到 1.4.0 RC1 并删除 ul 和 li 标签，因为这个列表应该只是一个列表视图或一个控制组，它不能同时是两者。这将是最终的 HTML：

<div data-role="content">  
    <fieldset data-role="controlgroup" id="myGroup" data-filter="true" data-icon="false">                
        <input type="checkbox" 
            name="itemIds" 
            id="228"/>   
        <label for="228">
            Orange
        </label>
        <input type="checkbox" 
            name="itemIds" 
            id="70"/>   
        <label for="70">
            Red
        </label>
        <input type="checkbox" 
            name="itemIds" 
            id="71"/>   
        <label for="71">
            Blue
        </label>

        <input type="checkbox" 
            name="itemIds" 
            id="72"/>   
        <label for="72">
            Purple
        </label>
    </fieldset>
</div>

你可以在这里试一试：http://jsfiddle.net/KsRb2/5/

【讨论】：

【解决方案2】：

jQM 正在创建自己的样式复选框，但将原始 INPUT 元素保留在 DOM 中。这在您过滤时会显示出来。以下 CSS 隐藏了这些元素：

li .ui-checkbox input{
    visibility: hidden;
}

这是你更新的小提琴：http://jsfiddle.net/ezanker/KsRb2/4/

【讨论】：

【解决方案3】：

实际上，您只需将 data-filter-reveal="true" 添加到字段集即可。无需使用 CSS。

【讨论】：