jquery mobile复选框没有被选中答案

【问题标题】：jquery mobile checkbox not getting selectedjquery mobile复选框没有被选中
【发布时间】：2012-12-11 01:25:31
【问题描述】：

我正在显示用户可以从中选择的项目列表。（多选）。我的要求是 1）如果选择了一个项目，则应突出显示整行，而不仅仅是复选框图标例如）http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html（垂直分组的复选框） 2) 不应显示复选框图标

Code Live version

<div id="content" data-role="content">
        <div id="list-checkboxes" data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="vertical"data-theme="m">
                <label for="chb_1" data-theme="m" >Car</label>
                <input type="checkbox" name="chb_1" id="chb_1" class="custom" />
                <label for="chb_2">Van</label>
                <input type="checkbox" name="chb_2" id="chb_2" class="custom" />

            </fieldset>    
        </div><!-- /content -->

【问题讨论】：

jQuery Mobile 仅支持复选框的 data-type="horizontal"。通过操纵 CSS，您可能会对垂直分组的按钮有一些运气。

标签： jquery css jquery-mobile

【解决方案1】：

您可以按如下方式覆盖 css 以实现此目的：

#verticalSelect .ui-checkbox{
   clear:both;
    /*float:none;*/

}

#verticalSelect .ui-checkbox .ui-btn{
   border-radius:0;
    border-top-width:0;

}

#verticalSelect .ui-checkbox:first-of-type .ui-btn{
   border-top-left-radius:0.6em;
    border-top-right-radius:0.6em;
    border-top-width:1px;

}

#verticalSelect .ui-checkbox:last-of-type .ui-btn{
   border-bottom-left-radius:0.6em;
    border-bottom-right-radius:0.6em;
}

这个想法是去除每个项目的浮动并调整边框样式。

完整演示在这里 - http://jsfiddle.net/c59FN/

【讨论】：