- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
- />
- <title>
- </title>
- <script src="js/mui.min.js">
- </script>
- <link href="CSS/mui.min.css" rel="stylesheet" />
- <script type="text/javascript" charset="utf-8">
- mui.init();
- </script>
- </head>
- <body>
- <header class="mui-bar mui-bar-nav">
- <!-- 顶部导航栏 - 带返回键 -->
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
- </a>
- <h1 class="mui-title">
- 测试属性 checkbox
- </h1>
- </header>
- <div class="mui-content">
- <div class="mui-input-row mui-radio mui-left">
- <!--mui-left 表示复选框在左侧 -->
- <label>
- 王者
- </label>
- <input name="checkbox1" value="王者" type="radio" class="rds">
- <!--checked="checked" 默认选中; class="rds" 方便获取 dom 节点 -->
- </div>
- <div class="mui-input-row mui-radio mui-left">
- <!--mui-radio 单选框 -->
- <label>
- 搬砖
- </label>
- <input name="checkbox1" value="搬砖" type="radio" class="rds">
- <!-- 注意单选框的 name 必须一致, 表示是一个组内的选项 -->
- </div>
- <button type="button" onclick="getVals();">
- 获取值
- </button>
- </div>
- <script type="text/javascript">
- function getVals() {
- var res = getRadioRes('rds');
- if (res == null) {
- mui.toast('请选择');
- return;
- }
- mui.toast(res);
- }
- function getRadioRes(className) {
- var rdsObj = document.getElementsByClassName(className);
- /* 获取值 */
- /*alert(rdsObj.length); 测试一下找到几个节点 */
- var checkVal = null;
- for (i = 0; i < rdsObj.length; i++) {
- if (rdsObj[i].checked) {
- checkVal = rdsObj[i].value;
- }
- }
- return checkVal;
- }
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3101068.html