<!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. WebApp开发技术搭配

    一:Ionic + angular + cordova + zipalign UI框架:lonic+angular 开发与编译打包框架:Cordova 优化工具:zipalign 二:MUI+HBui ...

  2. Hierarchical softmax(分层softmax)简单描述.

    最近在做分布式模型实现时,使用到了这个函数. 可以说非常体验非常的好. 速度非常快,效果和softmax差不多. 我们知道softmax在求解的时候,它的时间复杂度和我们的词表总量V一样O(V),是性 ...

  3. Jquery Post提交时Content-Type的不同取值详解

    四种常见的 POST 提交数据方式 我们知道,HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范.规范把 HTTP 请求分为三个部分:状态行.请求头.消息主体.类似于下 ...

  4. Python AES_ECB_PKCS5加密代码

    https://blog.csdn.net/u010978840/article/details/79035463 ****************************************** ...

  5. JVM系列——从菜鸟到入门

    持续更新系列. 参考自<深入理解Java虚拟机>.<Java性能权威指南>.<分布式Java应用基础与实践>. Java的内存结构 JVM系列——运行时数据区 JV ...

  6. 删除maven仓库中的LastUpdated文件

    转自:http://www.oschina.net/code/snippet_151849_49131 @echo off rem create by sunhao(sunhao.java@gmail ...

  7. C# 3个延时函数

    ) { int time = Environment.TickCount; while (true) { if (Environment.TickCount - time >= DelayTim ...

  8. mysql可以远程连接的配置

    由于配置好几次了,老是会忘记命令,所以记录下来 1.修改配置文件 我的配置文件是/etc/mysql/mysql.conf.d/mysqld.cnf 找到 bind-address = 127.0.0 ...

  9. 目前我对ReactNative的了解

    1.什么是React? 一个js组件库,不同于angular的是一个完整的framework,React需要像jQuery一样写事件监听逻辑,最大特点是Virtual DOM. 官网:https:// ...

  10. 公开的免费WebService接口分享

    天气预报Web服务,数据来源于中国气象局 Endpoint  Disco  WSDL IP地址来源搜索 WEB 服务(是目前最完整的IP地址数据) Endpoint  Disco  WSDL 随机英文 ...