jquery mobile 复选框和单选框
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>
显示效果
