form1.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. <script>
  12. $(function(){
  13. $('#formSubmitBtn').click(function(){
  14. var $ck = $('#ck:checked').val();
  15. if($ck=='on'){
  16. alert('选中');
  17. }else{
  18. alert('没有选中');
  19. }
  20. });
  21. });
  22. </script>
  23. </head>
  24. <body ontouchstart style="background-color: #f8f8f8;">
  25. <div class="page-hd">
  26. <h1 class="page-hd-title">
  27. 单选,多选,逻辑开关
  28. </h1>
  29. <p class="page-hd-desc"></p>
  30. </div>
  31. <div class="page-bd">
  32. <div class="weui_cells_title">喜欢的爱好</div>
  33. <div class="weui_cells weui_cells_radio">
  34. <label class="weui_cell weui_check_label" for="x11">
  35. <div class="weui_cell_bd weui_cell_primary">
  36. <p>足球</p>
  37. </div>
  38. <div class="weui_cell_ft">
  39. <input type="radio" class="weui_check" name="radio1" id="x11">
  40. <span class="weui_icon_checked"></span>
  41. </div>
  42. </label>
  43. <label class="weui_cell weui_check_label" for="x12">
  44. <div class="weui_cell_bd weui_cell_primary">
  45. <p>篮球</p>
  46. </div>
  47. <div class="weui_cell_ft">
  48. <input type="radio" name="radio1" class="weui_check" id="x12" checked="checked">
  49. <span class="weui_icon_checked"></span>
  50. </div>
  51. </label>
  52. <label class="weui_cell weui_check_label" for="x13">
  53. <div class="weui_cell_bd weui_cell_primary">
  54. <p>排球</p>
  55. </div>
  56. <div class="weui_cell_ft">
  57. <input type="radio" name="radio1" class="weui_check" id="x13">
  58. <span class="weui_icon_checked"></span>
  59. </div>
  60. </label>
  61. </div>
  62. <div class="weui_cells_title">你喜欢的国家</div>
  63. <div class="weui_cells weui_cells_checkbox">
  64. <label class="weui_cell weui_check_label" for="s11">
  65. <div class="weui_cell_hd">
  66. <input type="checkbox" class="weui_check" name="checkbox1" id="s11" checked="checked">
  67. <i class="weui_icon_checked"></i>
  68. </div>
  69. <div class="weui_cell_bd weui_cell_primary">
  70. <p>美国</p>
  71. </div>
  72. </label>
  73. <label class="weui_cell weui_check_label" for="s12">
  74. <div class="weui_cell_hd">
  75. <input type="checkbox" name="checkbox1" class="weui_check" id="s12">
  76. <i class="weui_icon_checked"></i>
  77. </div>
  78. <div class="weui_cell_bd weui_cell_primary">
  79. <p>英国</p>
  80. </div>
  81. </label>
  82. <label class="weui_cell weui_check_label" for="s13">
  83. <div class="weui_cell_hd">
  84. <input type="checkbox" name="checkbox1" class="weui_check" id="s13">
  85. <i class="weui_icon_checked"></i>
  86. </div>
  87. <div class="weui_cell_bd weui_cell_primary">
  88. <p>法国</p>
  89. </div>
  90. </label>
  91. <label class="weui_cell weui_check_label" for="s14">
  92. <div class="weui_cell_hd">
  93. <input type="checkbox" name="checkbox1" class="weui_check" id="s14">
  94. <i class="weui_icon_checked"></i>
  95. </div>
  96. <div class="weui_cell_bd weui_cell_primary">
  97. <p>德国</p>
  98. </div>
  99. </label>
  100. <a href="javascript:void(0);" class="weui_cell">
  101. <div class="weui_cell_bd weui_cell_primary f14">添加更多</div>
  102. </a>
  103. </div>
  104. <div class="weui_cells_title">开关</div>
  105. <div class="weui_cells weui_cells_form">
  106. <div class="weui_cell weui_cell_switch">
  107. <div class="weui_cell_hd weui_cell_primary">标题文字</div>
  108. <div class="weui_cell_ft">
  109. <input class="weui_switch" type="checkbox" checked/>
  110. </div>
  111. </div>
  112. <div class="weui_cell weui_cell_switch">
  113. <div class="weui_cell_hd weui_cell_primary">是否选中</div>
  114. <div class="weui_cell_ft">
  115. <input class="weui_switch" type="checkbox" id='ck'/>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="weui_btn_area">
  121. <a id="formSubmitBtn" href="javascript:" class="weui_btn weui_btn_primary">提交</a>
  122. </div>
  123. </body>
  124. </html>