如何通过name获取单选框和复选框选中状态的value值？

概述

有时候我们会遇到这组情况，就是需要通过单选框的name值获取到当前选中状态的value值，提交到后端，进行数据的修改，那么我们就来看看如何进行获取吧！

应用场景：我们有时候需要获取到单选框或者是复选框选中的那个，得到它的value值，传送到后端进行数据的添加，修改，或者是删除。

单选框获取方法

我们只需要定义一个方法，将我们需要获取的单选框的value值传递进去就好了，然后通过这个方法去获取就好了，是不是很方便呢？那我把代码贴到下面。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script></head><body><form><input type="radio"  name ="hero" value="jianShengg" >剑圣<input type="radio"  name ="hero" value="yaSuo" checked="checked">亚索<input type="radio"  name="hero" value="tiMo">提莫</form>
<script>// 此处去调用该方法
var checkElement=getRadioValue("hero");console.log("当前选中的元素="+checkElement)function getRadioValue(args){var element = document.getElementsByName(args);
// 通过获取到name属性=hero的所dom对象for(var i=0; i<element.length; i ++){// 判断该单选框是否处于选中状态if(element[i].checked){return element[i].value;}}}</script></body>
</html>

来我们看下运行结果：是不是非常之方便呢？

多选框获取方法

那我们了解单选框，那么多选框怎么办呢?也是差不多的，
我们需要把选中的多选框的value值返回，返回的格式为：value1，value2，value3的这种形式，只要是这种形式，那么就好办了，你可以直接将该字符串传送到后端，后端按照，号分割成为一个新的数组或者是集合都行，具体情况是多变的，那我们来看下实现方式：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form><input type="checkbox"  name ="hero" value="jianShengg" checked="checked" >剑圣<input type="checkbox"  name ="hero" value="yaSuo" checked="checked">亚索<input type="checkbox"  name="hero" value="tiMo">提莫</form>
<script>// 此处去调用该方法
var checkElement=getRadioValue("hero");console.log("当前选中的元素="+checkElement)function getRadioValue(args){var element = document.getElementsByName(args);
var args="";
// 通过获取到name属性=hero的所dom对象for(var i=0; i<element.length; i ++){// 判断该单选框是否处于选中状态if(element[i].checked){args+=element[i].value+",";}}return args.substr(0, args.length - 1);;}</script></body>
</html>

来我们验证一下是否是这样的：

如果你觉得对你有用的话就一键三连吧！后续我将给大家分享前端以及后端更多的实用知识。

如何通过name获取单选框和复选框选中状态的value值？相关推荐

java写html的多选框,Selenium+java - 单选框及复选框处理
Selenium+java - 单选框及复选框处理一.什么是单选框.复选框? 二.被测页面html源代码 CheckBoxRadioDemo.html CheckBox.Radio练习案例复选框 ...
form表单注意点合集（文本域、单选框、复选框、下拉框等）
.html <form action="#" target="_blank">账号:<input type="text" ...
JS判断HTML中创建的单选框、复选框、下拉列表框是否被选中
目录一.单选框: 二.复选框: 三.下拉列表框: 一.单选框: 有如下单选框:radio <div class="form-text">性别:</div> ...
纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
css美化单选款、复选框
一款美化单选款.复选框的样式支持度: Chrome Firefox Safari Opera IE9 && IE9+ 代码: <!DOCTYPE html> <ht ...
html:(19):单选框，复选框，下拉列表框
使用单选框.复选框,让用户选择在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户 ...
单选按钮带文字_一分钟教会你用Word添加单选框和复选框
又到学习Word技巧的时候啦!学了这么长时间,你的技能点有没有增加呢?对表格的使用有没有更加熟练了?是否很好奇别人家的表格是怎么弄成可以单选框和复选框的效果呢~~~~下面让小编带你解锁新姿势~ 效果图 ...
Vue指令 v-for遍历、下拉列表、单选框、复选框
4 .v-for遍历 4.1 遍历数组中的对象格式:v-for="item in list" 里面也可以返回下标格式:v-for="(item.index) in l ...
vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框在传统的HTM ...
关于单选框以及复选框的css美化方法
在工作中,遇到单选框和复选框还是一件很头疼的事情.丑就算了,关键是各个浏览器都不一样,这非常让我头疼. 以前一直用JQUERY来解决这个问题.不过js解决复选框没有问题,解决单选框就有点拙荆见肘,需要 ...

如何通过name获取单选框和复选框选中状态的value值？

概述

单选框获取方法

多选框获取方法

如何通过name获取单选框和复选框选中状态的value值？相关推荐

最新文章

热门文章