码迷,mamicode.com
首页 > Web开发 > 详细

jquery mobile 复选框和单选框

时间:2016-03-10 12:30:12      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

checkbox 和radio

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>Examples</title>
 7 <link rel="stylesheet" type="text/css" href="../jquery.mobile-1.4.5.min.css">
 8 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script>
 9 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script>
10 </head>
11 <body>
12 <div data-role="page">
13     <div data-role="header">
14         <h1>hello</h1>
15     </div>
16 <div data-role="content">
17     <label>
18         <input type="checkbox"  >
19     <!-- 将复选框放在label当中使内容和复选框同行显示,而不重叠 -->
20     苹果<!-- 复选框 -->
21     </label>
22     <fieldset data-role="controlgroup"><!-- date-role="controlgroup" -->
23 <!-- date-role="controlgro"将内容放在一组内进行显示 -->
24         <label>
25             <input type="checkbox"  name="cb0">12
26         </label>
27         <label>
28             <input type="checkbox" name="cb1">12
29         </label>
30         <label>
31             <input type="checkbox" name="cb1">12
32         </label>
33     </fieldset>
34     <fieldset data-role="controlgroup" data-type="horizontal">
35     <!-- 默认为竖向,若需要改成横向,加上data-type="horizontal" -->
36         <label>
37             <input type="checkbox"  name="cb0">12
38         </label>
39         <label>
40             <input type="checkbox" name="cb1">12
41         </label>
42         <label>
43             <input type="checkbox" name="cb1">12
44         </label>
45     </fieldset>
46     <!-- 单选按钮 -->
47     <fieldset data-role="controlgroup" data-type="horizontal">
48     <!--  data-role="controlgroup"形成列表组 data-type="horizontal"形成横向的列表组-->
49         <label>
50         <input type="radio" name="r1" id="name"></label>
51         <label>
52         <input type="radio" name="r1" id="women">53         </label>
54     </fieldset>
55 </div>
56 <div data-role="footer">
57     <h1>welcome</h1>
58 </div>
59 </div>
60 </body>
61 </html>

显示效果

技术分享

jquery mobile 复选框和单选框

标签:

原文地址:http://www.cnblogs.com/NB-JDzhou/p/5261004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!