Question

无法获取正确的CSS以在jqm中创建检查列表。在Make checkbox larger in Jquery Mobile的帮助下，我能够获得一个更大的复选框，但结果在不受欢迎的位置创建了新的复选框？我的标签元素似乎创建了额外的复选框，我的html没有。见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

我更新了你的小提琴 - ＆gt; 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>

JQuery Mobile中的复选框CSS样式（额外的复选框）

2 个答案: