<!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. SqlAlchemy “Too many connections”

    File "C:\Users\user\AppData\Local\Programs\Python\Python36\lib\site-packages\pymysql\connection ...

  2. Spark2.3（四十三）：Spark Broadcast总结

    为什么要使用广播(broadcast)变量? Spark中因为算子中的真正逻辑是发送到Executor中去运行的,所以当Executor中需要引用外部变量时,需要使用广播变量.进一步解释: 如果exe ...

  3. 柳青（Jean）英文演讲集合

    1.Didi Chuxing's Jean Liu on The Future of Cities  https://www.youtube.com/watch?v=G9uPGoN0dvQ 2.Did ...

  4. DES加密解密算法C语言代码实现

    代码: #include<stdio.h> #include<string.h> #include<stdlib.h> /*-------------------- ...

  5. 阿里云 CentOS7 安装 Nginx 后，无法访问的问题

    在阿里云实例中,选择 网络与安全中的安全组.修改安全组规则. 例如:   但是还是不行 需要这样排查 netstat -anp | grep 80 iptables -L -n   firewall- ...

  6. 写入多线程Log4net 多线程写入

    问题描述: 系统经常出现log无缘无故的丧失,每次系统出问题时去查log时发明log没有,愁闷了许久. 今天搞了将近一天,终于搞定. 处理步骤: 写了个控制台程序,在while(true)里头调用lo ...

  7. 使用MiniProfiler调试ASP.NET web api项目性能

    本质上,集成Miniprofiler可以分解为三个问题: 怎样监测一个WebApi项目的性能. 将性能分析监测信息从后端发送到UI. 在UI显示分析监测结果. 首先安装Miniprofiler,Min ...

  8. MSSQL数据导出到MYSQL

    MSSQL数据导出到MYSQL 花了一天时间把MSSQL里的数据导出到MYSQL, 好麻烦,二个数据库都是阿里云买的云服务器. 先上阿里云控制面板,备份下MSSQL数据库,下载备份下来,在本地电脑上还 ...

  9. redis 集群搭建碰到的问题

    make PREFIX=/usr/local/redis install把编译好的redis 安装到指定目录下. redis.conf文件从源码目录拷贝到/usr/local/redis(安装目录)下 ...

  10. 解决mybatis generator无法覆盖XML

    今天发现mybatis generator maven plugin在重复生成的时候xml文件只会merge,不会覆盖. 明明在pom.xml中配置了如下: <configuration> ...