jQueryMobile的元件——複選框（checkbox）和單選鈕（radio）
阿新 • • 發佈：2019-02-10
jQueryMobile框架為原生的html表單元素封裝了新的表現形式，對觸屏裝置的操作進行了優化。
data-theme="b"——指明元素的主題為黑色主題；
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>checkbox&radio例項</title> <script src="jquery-2.1.3.min.js"></script> <script src="jquery.mobile-1.4.5.min.js"></script> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" type="text/css"> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>歡迎來到主頁</h1> </div> <div data-role="content" > <label> <input type="checkbox">蘋果 </label> <fieldset data-role="controlgroup"> <label> <input type="checkbox" name="cb0">蘋果 </label> <label> <input type="checkbox" name="cb0">香蕉 </label> <label> <input type="checkbox" name="cb0">橘子 </label> </fieldset> <fieldset data-role="controlgroup" data-type="horizontal"> <label> <input type="checkbox" name="cb0">蘋果 </label> <label> <input type="checkbox" name="cb0" data-theme="b">香蕉 </label> <label> <input type="checkbox" name="cb0">橘子 </label> </fieldset> <fieldset data-role="controlgroup" data-type="horizontal"> <label> <input type="radio" name="r1" id="male">男 </label> <label> <input type="radio" name="r1" id="female" >女 </label> </fieldset> </div> <div data-role="footer" data-position="fixed"> <h1>這是底部</h1> </div> </div> </body> </html>
在iPhone6中的效果：
