废话不多说，直接上代码:

代码:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>JS 如何获取radio或者checkbox选中后的值</title>

</head>

<body>

  <p>单选框</p>

  <input type="radio" name="sex" value="man" id="man" checked onclick="inputChecked()">

  <label for="man">男</label>

  <input type="radio" name="sex" value="female" id="female" onclick="inputChecked()">

  <label for="female">女</label>

  <p>多选框</p>

  <input type="checkbox" name="fruits" value="apple" id="apple" checked onclick="inputChecked()">

  <label for="apple">苹果</label>

  <input type="checkbox" name="fruits" value="orange" id="orange" onclick="inputChecked()">

  <label for="orange">橙子</label>

  <script>

    inputChecked();

    function inputChecked() {

      var inputSelect = document.getElementsByTagName('input');

      var obj = {

          radio: [],

          checkbox: []

        },

        value = '';

      for (var i = 0, len = inputSelect.length; i < len; i++) {

        if (inputSelect[i].checked && inputSelect[i].type === 'radio') {

          obj.radio.push(inputSelect[i].value);

          value += '单选框：' + inputSelect[i].value + '\n';

        }

        if (inputSelect[i].checked && inputSelect[i].type === 'checkbox') {

          obj.checkbox.push(inputSelect[i].value);

          value += '多选框：' + inputSelect[i].value + '\n';

        }

      }

      alert(value);

      return obj;

    }

  </script>

</body>

</html>

JS 如何获取radio或者checkbox选中后的值的更多相关文章

  1. html中radio、checkbox选中状态研究（静下心来看，静下心来总结）

    html中radio.checkbox选中状态研究(静下心来看,静下心来总结) 一.总结 1.单选框的如果有多个checked 会以最后一个为准 2.js动态添加checked属性:不行:通过 $(& ...

  2. 微信小程序 - 更改radio和checkbox选中样式

    点击下载源码:示例-更改radio或checkbox选中样式

  3. 原生html、js手写 radio与checkbox 美化

    原生html.js手写 radio与checkbox   美化 html <!DOCTYPE html> <html> <head> <meta charse ...

  4. checkbox 选中、取值处理

    [1].[代码] checkbox 选中.取值处理 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  5. js如何获取asp.net服务器端控件的值(label,textbox,dropdownlist,radiobuttonlist等)

    js如何获取asp.net服务器端控件的值(label,textbox,dropdownlist,radiobuttonlist等) 欢迎访问原稿:http://hi.baidu.com/2wixia ...

  6. jquery获取radio和select选中值

    //jquery 获取radio选中值 <input type="radio" name="c_type" value="a" > ...

  7. html中radio、checkbox选中状态研究

    我们在web页面开发中经常需要让单选框.复选框进行选中或者不选中的操作, 我们可以在元素中添加checked属性 或者添加checked="checked" 都可以让某个选项默认选 ...

  8. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  9. layui 获取radio单选框选中的值

    Layui 获取 radio的值,layui判断radio选中的单选值 layui form 表单获取radio选中的值 首先准备两个radio <input type="radio& ...

随机推荐

  1. POJ-3349 Snowflake Snow Snowflakes---最小表示法

    题目链接: https://vjudge.net/problem/POJ-3349 题目大意: 每个雪花都有六个分支,用六个整数代表,这六个整数是从任意一个分支开始,朝顺时针或逆时针方向遍历得到的.输 ...

  2. C++11 新特性之 decltypekeyword

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/lr982330245/article/details/30728131 decltypekeywor ...

  3. C/C++语言代码规范

    1.标识符名称: 标识符名称包括函数名.常量名.变量名等.这些名字应该能反映它所代表的实际东西,具有一定的意义,使其能 够见名知义,有助于对程序功能的理解.规则如下: 所有宏定义.枚举常数和const ...

  4. mac 开机白屏，卡进度条，无法进入系统

    几个月前我的老Mac又一次的坏掉了,现在想起来就记录一下,哎,话说Apple的东西吧,好用是好用,一般都不会坏,质量保证,但是如果一旦坏了,那就是大问题!(坏了第一时间就应该打电话给apple客服小姐 ...

  5. Angular/cli的安装

    Angular cli 是一个命令行工具,用来创建,打包,发布项目. Angular cli 安装之前必须先安装Node 6.9.0及以上版本,NPM 3 及以上版本. 在cmd控制台窗口执行命令no ...

  6. pdo->prepare 返回false的问题总结

    报错信息: Fatal error: Call to a member function execute() on a non-object 一般是pdo->prepare 返回了false导致 ...

  7. 7-3 python操作excel

    1.写excel 写入特定单元格数据 # .导入xlwt模块 # .新建一个excel # .添加一个sheet页 # .往指定的单元格中写入数据 # .保存excel import xlwt boo ...

  8. 将 cmd 中命令输出内容保存为 TXT 文本文件

    如果执行的命令输出内容较多,那么 cmd 控制台将会自动清除前面的内容,那么如何将屏幕的所有内容导出到文本文件? 下面给出简单的演示例子 ping百度,不会自动结束,按 Ctrl+C 强制结束,pin ...

  9. Java数据处理

    对于形如“(TYPE=SITA##)&&(((CTYP=FPL##)||(CTYP=CHG##)||(CTYP=CNL##)||(CTYP=DLA##)||(CTYP=DL##)||( ...

  10. layer 点击弹出图片

    今天做东西有一个功能:在列表点击图片弹出并放大显示,使用到了layer的页面层,下边是个小demo success:function (e) { var url = e.qrcode_url; //a ...