获取<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 ...
随机推荐
- CC2530外部中断
一.中断基础概念 内核与外设之间的主要交互方式有两种:轮询和中断.中断系统使得内核具备了应对突发事件的能力. 在执行CPU当前程序时,由于系统中出现了某种急需处理的情况,CPU暂停正在执行的程序,转 ...
- java基础篇 之 再探内部类跟final
之前写过一篇文章:从垃圾回收机制解析为什么局部内部类只能访问final修饰的局部变量以及为什么加final能解决问题,经过这两天的学习,发现有些不对,必须再来捋一捋 先看之前的例子: /** * @a ...
- Excel非常规快捷键
Windows+V,调出剪贴板,是常规快捷键,鼠标右键-W-F,新建文件夹,这是非常规快捷键. 掌握Excel大半菜单和三五十快捷键,Excel也算入门了.对Excel快捷键的学习,其一是常规快捷键, ...
- MySQL 主从复制原理及过程讲解
mysql主从原理描述,摘自老男孩. 下面简 单描述下 MySQL Replication 复制的原理及过程 . 1.在 Slave 服务器上执行 start slave 命令开启主从复制开关,主从复 ...
- 局域网ip地址扫描_v1版本
局域网ip地址扫描 工作中,我们有时需要对局域网中ip地址使用情况进行统计.可以使用shell脚本进行扫. 脚本功能: 在线使用IP写入list_online.txt文件 未在线IP写入list_of ...
- 树莓派ssh总掉线
之前入手了一个树莓派,但是远程ssh连接经常掉线,开始以为是电源不行,导致机器重启,后面加了一个显示器,观察了一段时间,发现机器并没有重启,应该是WiFi掉线了,在网上发现,树莓派如果一段网络没有流量 ...
- ajax提交可以上传文件的form表单
var formData = new FormData($( "#fm")[0]); $.ajax({ url: 'webnavigationcw ...
- redis学习——day02_redis数据类型
一.简介 Redis不仅仅是简单的key-value 存储器,同时也是一种data structures server.传统的key-value是指支持使用一个key字符串来索引value字符串的存储 ...
- E. Alternating Tree 树点分治|树形DP
题意:给你一颗树,然后这颗树有n*n条路径,a->b和b->a算是一条,然后路径的权值是 vi*(-1)^(i+1) 注意是点有权值. 从上头往下考虑是点分治,从下向上考虑就是树形DP, ...
- TCO14286 TriangleTriples
题目链接:https://vjudge.net/problem/TopCoder-14286 知识点: 组合数学.容斥原理 题目大意: 给出 \(A,B,C\),问有多少个有序三元组 \((a,b,c ...