背景：

　　<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. Day_13【IO流】扩展案例2_统计键盘录入字符在指定项目文件中出现的次数

    分析以下需求,并用代码实现 键盘录入一个字符(以字符串的形式录入) 判断当前字符在info3.txt当中是否存在 如果不存在, 给出提示 如果存在, 请统计出该字符出现的次数 Info3.txt内容如 ...

  2. Viterbi-Algorithm（维特比）算法

    CSDN博客:皮乾东  知乎:Htrying  微博:Htring的微博  微信公众号:自然语言处理爱好者(ID:NLP_lover)  文章来自:<数学之美> Viterbi-Algor ...

  3. FPGA学习心得汇总(手中写代码，心中有电路)

    http://bbs.ednchina.com/BLOG_ARTICLE_2111172.HTM 任何的时序逻辑都可以转换为组合逻辑+D触发器来完成. FPGA内部主要三块:可编程的逻辑单元.可编程的 ...

  4. [zoj3813]Alternating Sum 公式化简，线段树

    题意:给一个长度不超过100000的原串S(只包含数字0-9),令T为将S重复若干次首尾连接后得到的新串,有两种操作:(1)修改原串S某个位置的值(2)给定L,R,询问T中L<=i<=j& ...

  5. HDU 2012 （水）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2012 题目大意:给你段连续数字,判断每个数字带入函数 n^2+n+41 是否都为素数,是输入OK,否则 ...

  6. 2018-06-24 js BOM对象

    BOM对象: Browser Object Model 即浏览器对象模型: 包含: window:窗口对象 alert();//警示框 confirm();//确认框 prompt();//输入提示框 ...

  7. 仅需60秒，使用k3sup快速部署高可用K3s集群

    作者简介 Dmitriy Akulov,连续创业者,16岁时搭建了开源CDN公共服务jsDelivr的v1版本.目前是边缘托管平台appfleet创始人. 原文链接: https://ma.ttias ...

  8. 两圆相交求面积 hdu5120

    转载 两圆相交分如下集中情况:相离.相切.相交.包含. 设两圆圆心分别是O1和O2,半径分别是r1和r2,设d为两圆心距离.又因为两圆有大有小,我们设较小的圆是O1. 相离相切的面积为零,代码如下: ...

  9. Nginx 运维（安装与使用）

    Nginx 运维(安装与使用) 普通安装 Windows安装 (1)进入官方下载地址,选择合适版本(nginx/Windows-xxx). (2)解压到本地 (3)启动 下面以 C 盘根目录为例说明下 ...

  10. SpringBoot系列——状态机（附完整源码）

    1. 简单介绍状态机 2. 状态机的本质 3. 状态机应用场景 1. 简单介绍状态机 状态机由状态寄存器和组合逻辑电路构成,能够根据控制信号按照预先设定的状态进行状态转移,是协调相关信号动作.完成特定 ...