<!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. ChartControl控件0和null的效果

    DevExpress的ChartControl虽然还不能完全代替Office图表(例如它暂时不支持添加数据表),但它算同类产品中相当优秀的了,下面是对0值和空值的处理. DataTable zeroD ...

  3. python写入excel(xlswriter)--生成图表

    一.折线图: # -*- coding:utf-8 -*- import xlsxwriter # 创建一个excel workbook = xlsxwriter.Workbook("cha ...

  4. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  5. Swoole PHP windows composer

    直接下载了 Swoole PHP 的 Windows 版安装包来用,遇到需要 Composer. 先是下载了 composer.phar.在这里下的 https://getcomposer.org/d ...

  6. 微信小程序官方DEMO解读

    我们在开始微信小程序开发的时候,对JS,HTML等前端知识一无所知,完完全全就是门外汉在尝试一个新的方向. 在下载好开发工具,微信就已经提供了一个DEMO例子: 从程序开发的角度来看这个陌生的目录结构 ...

  7. Effective Java 第三版——72. 赞成使用标准异常

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  8. [转]调试利器-SSH隧道

    在开发微信公众号或小程序的时候,由于微信平台规则的限制,部分接口需要通过线上域名才能正常访问.但我们一般都会在本地开发,因为这能快速的看到源码修改后的运行结果.但当涉及到需要调用微信接口时,由于不和你 ...

  9. GooglePlay发布应用后，支持的 Android 设备 0 台设备

    这个问题主要是权限问题: android.hardware.camera2.full #把这个权限去掉,注里能功里就不会有这一项了android.hardware.camera2.full 然后重新打 ...

  10. 9-11-Trie树/字典树/前缀树-查找-第9章-《数据结构》课本源码-严蔚敏吴伟民版

    课本源码部分 第9章  查找 - Trie树/字典树/前缀树(键树) ——<数据结构>-严蔚敏.吴伟民版        源码使用说明  链接☛☛☛ <数据结构-C语言版>(严蔚 ...