<!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">hello</h1>

</header>

<div class="mui-content">

<span class="mui-badge mui-badge-inverted">1</span>

<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>

    <div class="mui-input-row mui-radio mui-left">

        <label>运动</label>

        <input name="checkbox1" value="运动" type="radio" class="rds"/>

    </div>

    <div class="mui-input-row mui-radio mui-left">

      <label>篮球</label>

      <input name="checkbox1" value="篮球" type="radio" class="rds"/>

    </div>

<button type="botton" onclick="getVals();">获取复选框的值</button>

    <div class="mui-input-row mui-checkbox mui-left">

        <label>运动</label>

        <input name="checkbox1" value="运动" type="checkbox" class="rdss"/>

    </div>

    <div class="mui-input-row mui-checkbox mui-left">

      <label>篮球</label>

      <input name="checkbox1" value="篮球" type="checkbox" class="rdss"/>

    </div>

<button type="botton" onclick="getVal();">获取多选框的值</button>

</div>

</body>

<script type="text/javascript">

    /*复选框的请求方法*/

    function getVals(){

        var res = getRadioRes('rds');

        if(res == null){

            mui.toast('请选择');

            return false;

        }

        mui.toast(res);

    }

    /*多选框的触发方法*/

    function getVal(){

        var res = getcheckBoxRes('rdss');

        if(res.length < 1){

            mui.toast('请选择');

            return false;

        }

        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;

    }

    //封装的方法 获取多选框的数据

    function getcheckBoxRes(className){

        var rdsobj = document.getElementsByClassName(className);

        var checkVal = new Array();

        var $k = 0;

        for(i = 0; i<rdsobj.length; i++){

            if(rdsobj[i].checked){

                checkVal[$k] = rdsobj[i].value;

                $k++;

            }

        }

        return checkVal;

    }

</script>

</html>

MUI - 复选框、单选框、使用js获取选择值的更多相关文章

  1. [CSS]复选框单选框与文字对齐问题的研究与解决.

    前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...

  2. 关于SWT常用组件(按钮,复选框,单选框(Button类))

    Button是SWT中最常用的组件.Button类的继承关系图: Button类的构造方法是newe Button(Composite parent,int style)它有两个参数: 第一个参数:是 ...

  3. MFC控件编程之复选框单选框分组框

    MFC控件编程之复选框单选框分组框 一丶分组框 分组框 英文叫做 GroubBox 添加了分组框主要就是分组.好看.不重点介绍 二丶单选框 英文: Raido Button 单选框需要注意的事项 1. ...

  4. ztree根据参数动态控制是否显示复选框/单选框(静态JSON数据)

    本文不再更新,可能存在内容过时的情况,实时更新请访问原地址:ztree根据参数动态控制是否显示复选框/单选框(静态JSON数据): 现有全省各地区静态JSON数据,现在想通过Url参数,动态控制是否显 ...

  5. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  6. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  7. pentaho cde 自定义复选下拉框 checkbox select

    pentaho  自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...

  8. jq check 复选变单选。

    $("input[type='checkbox']").on("click",function(e){ var $checked = $("input ...

  9. php 查找数组中是否存在某项，并返回指定的字符串，可用于检查复选，单选等

    /** * 查找数组中是否存在某项,并返回指定的字符串,可用于检查复选,单选等 * @param $id * @param $ids * @param string $returnstr * @ret ...

随机推荐

  1. JSP展示两位小数

    <td class="thCenter"> <fmt:formatNumber type="number" value="${rec ...

  2. adb shell 命令详解

    adb介绍 SDK的Tools文件夹下包含着Android模拟器操作的重要命令adb,adb的全称为(Android Debug Bridge就是调试桥的作用.通过adb我们可以在Eclipse中方面 ...

  3. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  4. mongodb配置文件解说(转载)

    启动方式 ./bin/mongod -f mongodb.conf 会看到 about to fork child process, waiting until server is ready for ...

  5. System.Net.HttpWebRequest.GetResponse() 远程服务器

    WebException 服务器状态码错误,比如500服务器内部错误 现象 我们编码实现请求一个页面时,请求的代码类似如下代码: HttpWebRequest req = (HttpWebReques ...

  6. [转]Mybatis foreach 批量操作

    原文地址:https://blog.csdn.net/jason5186/article/details/40896043 foreach属性属性    描述item    循环体中的具体对象.支持属 ...

  7. MOD(motion Object Detection)介绍

    Motion Detection or Moving Object Detection 称之为运动侦测,移动侦测,移动检测 MOD全称为Moving Object Detection,中文“移动物体检 ...

  8. 通过灰度线性映射增强图像对比度实现PS中的色阶

    通过灰度线性映射增强图像对比度 Halcon中如何通过灰度线性映射增强图片对比度呢?不急,我先讲点其他的. 如果你用过Photoshop,那么想必对增强图像的对比度很熟悉.在Photoshop中,我们 ...

  9. oozie调度sqoop Job 数据库密码无法保存

    问题描述 通过oozie调度sqoop作业时,需要输入数据库作业密码,但在sqoop元数据服务配置密码后,过一段时间会失效. 解决方法 将数据库密码写入HDFS文件,通过配置Sqoop job,实现传 ...

  10. ASCII码与unicode字符集

    问题1:为什么需要字符ASCII码.unicode码等等???它们到底有什么作用? 首先要明白一个事实:在计算机中只能用一系列存储着的0和1,当我们把一个字符存放在计算机时,我们是如何表示常用的字符呢 ...