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

代码:

<!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. 【CCPC-Wannafly Winter Camp Day3 (Div1) G】排列(水题)

    点此看题面 大致题意:已知 \(p\)为\(n\)的一个排列,定义\(A(p)_i=min_{j=1}^ip_j\),若用\(q_i\)表示\(p\)第\(i\)小的前缀的长度(以值为第一关键字,下标 ...

  2. caffe RandomHue和RandomSaturation

    https://www.cnblogs.com/wangyblzu/p/5710715.html HSV和RGB一样是一种图像的颜色模型,h表示色调,s表示饱和度 1.RandomHue void R ...

  3. 下载Xcode历史版本方法

    1.打开链接:https://developer.apple.com/download/more 进入页面 2.在搜索框输入Xcode,回车搜索.如图,找到各种版本Xcode 搜索Xcode 3.双击 ...

  4. visual attention

    The visual attention mechanism may have at least the following basic components [Tsotsos, et. al. 19 ...

  5. mac 开机白屏,卡进度条,无法进入系统

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

  6. ECMAscript6(ES6)新特性语法总结(一)

    ES6/ES2015,,在ES5的基础上扩展了很多新的功能,在使用的时候要慎重,因为有一部分js代码在部分浏览器是不兼容的,但是所有写在服务器端的代码基本上都支持ES6的写法. 新特性: 一.开启严格 ...

  7. SQL关于删除的三个语句:DROP、TRUNCATE、 DELETE 的区别。

    DROP: DROP TABLE test; 删除表test,并释放空间,将test删除的一干二净. TRUNCATE: TRUNCATE test; 删除表test里的内容,并释放空间,但不删除表的 ...

  8. VM虚拟机里的Ubuntu系统怎么设置屏幕分辨率

    说白了就是安装VMWare tools工具,步骤如下: 1)在VMWare中启动ubuntu虚拟机 2)在VMWare中:右键单击启动虚拟机,点击[安装vmware tools] 3)在ubuntu中 ...

  9. javascript中string对象方法中的slice、substring、substr的区别联系

    1.slice.substring.snustr均属于String的对象方法,用于截取或提取字符串片段,三者均布破坏原先的字符串,而是以新的字符串返回被提取的部分. <script> va ...

  10. HDU3853 概率DP

    LOOPS   Homura wants to help her friend Madoka save the world. But because of the plot of the Boss I ...