CSS JQuery 移动设备中复选框的样式（额外的复选框）

Question

无法获得正确的 css 在 jqm 中创建检查列表。借助 I was able to get a larger checkbox but the results created new checkbox in undesired location? my label elements seem to be creating extra checkbox where my html doesn't have one. see JSFiddle 示例。

外部标签标签正在生成一个复选框，并且 css 使框变大所需的尺寸仅应用于外部标签框（甚至不应该存在的那个）。

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<div data-role="page" data-theme="b" id="acs">
<div data-role="header">
  <h2>Key Performance Indicators</h2> 
</div>

<div data-role="content">    
  <ul data-role="listview" data-theme="b">   
    <li>
      <h1>Assess Cardiac Risk Factors</h1>                                     
       <label>                                               
       <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>      
       <label for="checkbox-2b">
         <label> 
           <h3>Age</h3>
         </label> 
       </label>
       </label>                                              

       <label>
       <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>      
       <label for="checkbox-2b">
         <label> 
           <h3>Diabetes</h3>
         </label> 
       </label>
       </label>
  </li>
 </ul>     
</div>

<div data-role="footer">
<div data-role="navbar">
</div>
</div>
<div>
  <h4>My Footer</h4>
</div>        

</div>

CSS

#checkbox-2b {
-ms-transform: scale(6); /* IE */
-moz-transform: scale(6); /* FF */
-webkit-transform: scale(6); /* Safari and Chrome */
-o-transform: scale(6); /* Opera */
padding: 10px;
}

Answer 1

我已经更新了你的 fiddle -> http://jsfiddle.net/xxdrf87q/7/

查看文档，使用其标签创建复选框的正确方法是：

<label>
      <input type="checkbox" name="checkbox-0 ">Check me
</label>

所以我更改了这部分：

<label>
    <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>  Age
</label>                                              
<label>
    <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/> Diabetes
</label>

Answer 2

感谢 jcarrera 的修复，在这里澄清我的最后一个问题是对未经请求的多个复选框的解决方案：css 需要添加 z-index: 2; 以应用于顶层复选框并删除id 来自标签元素。通过删除不需要的额外标签来清理额外代码。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

 <div data-role="page" data-theme="b" id="acs">
 <div data-role="header">
   <h2>Key Performance Indicators</h2> 
 </div>

 <div data-role="content">    
   <ul data-role="listview" data-split-icon="gear" data-theme="c">   

   <h1>Assess Cardiac Risk Factors</h1>                                     
     <label>                                               
     <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>                
         <h3>Age</h3>
     </label>                                              

     <label>
     <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>                
         <h3>Diabetes</h3>
     </label>
    </ul>     
   </div>
  <div data-role="footer">
  <div data-role="navbar">
  </div>    
    <h4>John Doe</h4>
  </div>        
</div>

CSS JQuery 移动设备中复选框的样式（额外的复选框）

CSS styling for checkbox in JQuery Mobile (extra checkbox)

css

jquery-mobile