背景：

　　<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. P2762 太空飞行计划问题 网络流

    题目描述 W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,…,Em},和进行这些实验需要使用的全部仪器的 ...

  2. struts2入门教学

    我的博客地址:https://blog.csdn.net/qq_41907991 首先介绍一下struts2使用的基本步骤: 1.导入相关的 jar 文件 2.需要在 web.xml 文件中配置一个 ...

  3. OpenWrt R2020.3.19 反追踪 抗污染 加速 PSW 无缝集成 UnPnP NAS

    固件说明 基于Lede OpenWrt R2020.3.19版本Lienol Feed及若干自行维护的软件包 结合家庭x86软路由场景需要定制 按照家庭应用场景对固件及软件进行测试,通过后发布 设计目 ...

  4. OpenCV 经纬法将鱼眼图像展开

    文章目录 前言 理论部分 鱼眼展开流程 鱼眼标准坐标计算 标准坐标系与球坐标的转换 代码实现 测试效果如下图 总结 this demo on github 前言 鱼眼镜头相比传统的镜头,视角更广,采集 ...

  5. 基于mykernel 2.0编写一个操作系统内核

    一.配置mykernel 2.0,熟悉Linux内核的编译 1.实验环境:VMware 15 Pro,Ubuntu 18.04.4 2.配置环境 1)在电脑上先下载好以下两个文件,之后通过共享文件夹, ...

  6. uCOS2014.1.7

    主要关于任务堆栈: 在计算机中一般设置一个专用的地址寄存器用来存放堆栈的栈顶地址,这个寄存器称为堆栈指针(SP). 任务堆栈有两种,一种是地址向下增长的,PC就是采用这样的堆栈: 另一种是地址向上增长 ...

  7. 1008 Elevator (20分)

    1008 Elevator (20分) 题目: The highest building in our city has only one elevator. A request list is ma ...

  8. 08JAVA基础关键字(final、static)以及抽象类和接口

    一.关键字 1.final 修饰类 修饰变量 修饰成员方法 该类为最终类,不能被继承 该变量为常量 该成员方法不能被重写 2.static (1).生命周期 随着类的加载而加载 (2).特点 被本类所 ...

  9. mp4封装格式各box类型讲解及IBP帧计算

    mp4封装格式各box类型讲解及IBP帧计算 目录 mp4封装格式各box类型讲解及IBP帧计算 box ftyp box moov box mvhd box (Movie Header Box) t ...

  10. Java注解的定义和使用

    注解也叫元数据,一种代码级别的说明.是jdk1.5后产生的一个特性,与类.接口.枚举同一个档次,他可以在包.类.字段.方法.局部变量.方法参数等的前面,用来对这些元素进行说明.注释: <!--m ...