获取<input type="radio">被选中的内容
背景：
<input type="radio">，该标签表示的是单选按钮，这个类型相对于其他类型的获取，比较特殊，特此记录一下。
获取方式：
1. 使用选择器直接获取（注意选择器这种方式的使用）；
<html>
<head>
<title>标题示例</title>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<form>
<p>Please select your preferred contact method:</p>
<div>
<input type="radio" id="contactChoice1"
name="contact" value="email">
<label for="contactChoice1">Email</label> <input type="radio" id="contactChoice2"
name="contact" value="phone">
<label for="contactChoice2">Phone</label> <input type="radio" id="contactChoice3"
name="contact" value="mail">
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="button">Submit</button>
</div>
</form>
<script>
let ele = document.querySelector('button')
let form = document.querySelector('form')
ele.addEventListener('click', function () {
let x = form.querySelector("input[name='contact']:checked")
console.log(x.value)
})
</script>
</body>
</html>
2. 使用FormData对象获取；
<html>
<head>
<title>标题示例</title>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<form>
<p>Please select your preferred contact method:</p>
<div>
<input type="radio" id="contactChoice1"
name="contact" value="email">
<label for="contactChoice1">Email</label> <input type="radio" id="contactChoice2"
name="contact" value="phone">
<label for="contactChoice2">Phone</label> <input type="radio" id="contactChoice3"
name="contact" value="mail">
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="button">Submit</button>
</div>
</form>
<script>
let ele = document.querySelector('button')
let form = document.querySelector('form')
ele.addEventListener('click', function () {
var data = new FormData(form);
var output = "";
for (const entry of data) {
output = entry[0] + "=" + entry[1] + "\r";
};
console.log(output)
})
</script>
</body>
</html>
参考地址：
2. https://blog.csdn.net/qq_39822451/article/details/82753282
获取<input type="radio">被选中的内容的更多相关文章
- 获取input type=radio属性的value值
个人代码1: <div class="form-group" style="width: 250px;margin:0 auto;"> <la ...
- 点击文字，把input type="radio"也选中
本文原文地址:https://my.oschina.net/jack088/blog/469815 1. <label> <input type="radio" ...
- jquery 获取 input type radio checked的元素
.find('input:radio:checked'):.find("input[type='radio']:checked");.find("input[name=' ...
- 获取input type=file 的文件内容（纯文本）
一.获取input type=file 的文件内容(纯文本) 1.需求一 通过点击其他事件,来触发 文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...
- <input type="radio" >与<input type="checkbox">值得获取
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- input[type=radio]选中的样式变化
input[type=radio]:hover{ border: 2px solid #D0D0D0; } input[type=radio]:focus{ border: 2px solid #1B ...
- 自定义input[type="radio"]的样式
对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...
- jQuery操作<input type="radio">
input type="radio">如下: <input type="radio" name="city" value=&qu ...
- 自定义input[type="radio"]
对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...
随机推荐
- 201771010113-李婷华 实验一 软件工程准备-<软件工程的相关了解>
项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/nwnu2020SE 这个作业要求链接 https://www.cnblogs.com/nwnu- ...
- leetcode485——最大连续1的个数（easy)
一.题目描述 给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1] 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3. 注意 ...
- Directory类和DirectoryInfo类
1.Directory类 Directory类公开了用于创建.移动.枚举.删除目录和子目录的静态方法 2.DirectoryInfo类 DirectoryInfo和Directory类的区别可以参看F ...
- springBoot整合Spring-Data-JPA， Redis Redis-Desktop-Manager2020 windows
源码地址:https://gitee.com/ytfs-dtx/SpringBoot Redis-Desktop-Manager2020地址: https://ytsf.lanzous.com/b01 ...
- 更加灵活的参数校验，Spring-boot自定义参数校验注解
上文我们讨论了如何使用@Min.@Max等注解进行参数校验,主要是针对基本数据类型和级联对象进行参数校验的演示,但是在实际中我们往往需要更为复杂的校验规则,比如注册用户的密码和确认密码进行校验,这个时 ...
- 在没有RedirectAttributes的环境中如何在重定向环境中报错错误提示信息供页面使用
Spring在无RedirectAttributes的情况下(如Interceptor.filter中)使用Flash scope 今天遇到一个应用场景: 在需要在自定义的Interceptor中判断 ...
- Python基础语法day_03——列表
day_03 列表是什么 在Python中,用[]来表示列表,并用逗号来分隔其中的元素.下面是一个简单的列表示例: >>> bicycles = ['treak','cannonda ...
- 正则+re模块知识总结
目录 正则表达式 定义+特点 元字符 量词 贪婪匹配与非贪婪匹配 转义符 re模块 re.findall re.search re.match re.compile re.finditer re.sp ...
- Postgres的索引01
一.PG 9.3有以下索引类型 1.b-tree 1.1支持前导模糊查询,如xxx%或者^'xxx' 1.2忽略大小写字符前导模糊查询,如ILIKE 'XXX%'或者~*'^xxx' 1.3支持常见的 ...
- poj2226更改行列匹配建图
Muddy Fields Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10961 Accepted: 4071 Des ...