背景：

　　<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>

参考地址：

　　1. MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#%E8%A1%A8%E5%8D%95_%3Cinput%3E_%E7%B1%BB%E5%9E%8B

　　2. https://blog.csdn.net/qq_39822451/article/details/82753282

获取<input type="radio">被选中的内容的更多相关文章

  1. 获取input type=radio属性的value值

    个人代码1: <div class="form-group" style="width: 250px;margin:0 auto;"> <la ...

  2. 点击文字，把input type="radio"也选中

    本文原文地址:https://my.oschina.net/jack088/blog/469815 1. <label> <input type="radio" ...

  3. jquery 获取 input type radio checked的元素

    .find('input:radio:checked'):.find("input[type='radio']:checked");.find("input[name=' ...

  4. 获取input type=file 的文件内容（纯文本）

    一.获取input type=file 的文件内容(纯文本) 1.需求一 通过点击其他事件,来触发 文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...

  5. <input type="radio" >与<input type="checkbox">值得获取

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. input[type=radio]选中的样式变化

    input[type=radio]:hover{ border: 2px solid #D0D0D0; } input[type=radio]:focus{ border: 2px solid #1B ...

  7. 自定义input[type="radio"]的样式

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...

  8. jQuery操作<input type="radio">

    input type="radio">如下: <input type="radio" name="city" value=&qu ...

  9. 自定义input[type="radio"]

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...

随机推荐

  1. NetCore项目实战篇04---集成IdentityService4

    大家都知道我们的项目中已有web api,现在可以正式访问,不论任何人只要通过输入对应的api网址就可以访问到我们的api 资源,这样是很不安全的,我们需求对当前用户进行身份验证,因此我们在项目中使用 ...

  2. XSS检测总结

    XSS漏洞介绍     跨站脚本XSS是一种针对网站应用程序的安全漏洞攻击技术.恶意攻击者往web页面插入恶意的Script代码,当用于浏览该页时,嵌入web中的恶意代码就会被执行,从而达到恶意攻击用 ...

  3. 写了shell脚本想一键启动三台虚拟机的Zookeeper，却不知道为啥总是启动不了

    首先,一键启动的shell脚本是这样的 #! /bin/bash case $1 in "start"){ for i in node01 node02 node03 do ssh ...

  4. STM32 串口USART DMA方式发送接收数据

    硬件:stm32f103cbt6 软件:STM32F10x_StdPeriph_Lib_V3.5.0 文章目录 头文件 USART3_DR的地址 DMA的通道 DMA的中断 USART接收回调函数 头 ...

  5. python之unittest验证函数功能

    一.待验证脚本 首先,有如下三个脚本,分别对应三个函数 分别导入模块行,如下: from fuction1 import fu1 from fuction2 import fu2 from fucti ...

  6. RabbitMQ及延时队列

    一.简介 我用过RabbirMQ的发布订阅模式,以及一对一的延迟队列. 1.RabbitMQ的有消息确认机制,消费一条则队列中少一条,也有对应的消费到消息及认为是消费成功这样的模式,一般使用前者. 发 ...

  7. linux 被入侵后扫尾工作

    比较恶心,安装了后门,还把ssh sshd 给改了,服务器在机房,还不大好处理,如果贸然上去改,还容易把自己关在外面. 但是我有salt ,上面可以用cmd.run运行一切命令.不走sshd服务. l ...

  8. java十大排序

    0.1 算法分类 十种常见排序算法可以分为两大类: 比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此也称为非线性时间比较类排序. 非比较类排序:不通过比较来决 ...

  9. React 中使用sass

    npm install node-sass-chokidar --save-dev package.json添加两行: "scripts": { 2 "build-css ...

  10. SpringBoot2.x整合quartz实现多任务定时执行

    一.pom文件中导入相关依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifa ...