获取<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 ...
随机推荐
- inode block 软硬链接
inode block 软硬链接 1 inode 1.1 inode(索引节点)作用 (1)用于存储文件数据属性信息(2)用于存储数据指针信息 1.2 如何产生 格式化时,创建文件系统 1.3 如何查 ...
- Linux软件安装和维护
rpm 早期 redhat package manager 现在 rpm package manager rpm安装的格式: 软件名称-版本号-适用平台.rpm jdk -8u151 -linux-x ...
- 王颖奇 201771010129《面向对象程序设计（java）》第七周学习总结
实验七 继承附加实验 实验时间 2018-10-11 1.实验目的与要求 (1)进一步理解4个成员访问权限修饰符的用途: A.仅对本类可见-private B.对所有类可见-public C.对本包和 ...
- 你的团队需要一个正确的程序集(dll)管理姿势
很多团队经历时间的积淀之后,都会有很多的可重用的公共技术组件.大部分的团队都会把这些公共组件生成程序集(dll)后,放到GIT或SVN的一个公共目录里面,以供各个项目中使用.起初在项目很少又或者是公共 ...
- 在没有RedirectAttributes的环境中如何在重定向环境中报错错误提示信息供页面使用
Spring在无RedirectAttributes的情况下(如Interceptor.filter中)使用Flash scope 今天遇到一个应用场景: 在需要在自定义的Interceptor中判断 ...
- 学习笔记：平衡树-splay
嗯好的今天我们来谈谈cosplay splay是一种操作,是一种调整二叉排序树的操作,但是它并不会时时刻刻保持一个平衡,因为它会根据每一次操作把需要操作的点旋转到根节点上 所谓二叉排序树,就是满足对树 ...
- orcle增删改操作及alter修改表字段操作
orcle增删改操作:操作前确保当前用户有增删改的权限. --创建表 create table itcast( pid ), pname ) ); drop table itcast; --复制表 c ...
- php5.2安装memcached 扩展
需要注意版本号,好坑. libmemcached release 1.0.16 - installed from sourcephp-memcached release 2.1.0 - install ...
- HTML标签和属性一
一.web基础知识 html,专门指网页技术 HTML5,大前端技术(网页,app,桌面程序,数据可视化,VR....) 网页(pc,pad,phone) app wx 服务器 数据库 HTML5 ...
- nginx配置之禁止访问和404错误功能配置
禁止访问功能配置 nginx.conf中的http{}中的server{}的location ..{}中: location / { #拒绝访问,192.168.16.0网段的同学都无法访问 /24是 ...