背景：

　　<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. Json格式数据的解析

    JSON是一种轻量级的数据交换格式,我们在编程中遇到的JSON数据通常就是一串字符串,只不过按照特定的格式去书写,这样当你把JSON数据传输给别人的时候对方只要使用这种特定的规则去阅读解析你的数据即可 ...

  2. PDF怎么转换成Word，免费，完整的那种

      简介 PDF可以分为文字型PDF和图片型PDF,文字型PDF即可以选中文字内容的PDF,反之图片型PDF即无法选中文字的PDF,其内容实际上是图片. 本文针对不同类型,介绍PDF转Word方法,可 ...

  3. [hdu4911]逆序对相关

    思路:由于只能交换相邻的数,所以每次最多减小1个逆序对(且如果存在逆序对那么肯定可以减小1个)!于是乎..就是统计逆序对的裸题了.树状数组或归并都行. #pragma comment(linker, ...

  4. vue mock 模拟接口数据

    日常总结 希望能帮到大家 1 mock/sever.js  //创建服务 let http=require('http') let fs=require('fs') let url=require(' ...

  5. Java ThreadLocal解析

    简介 ThreadLocal 类似局部变量,解决了单个线程维护自己线程内的变量值(存.取.删),让线程之间的数据进行隔离.(InheritableThreadLocal 特例) 这里涉及三个类,Thr ...

  6. SQL server 的使用中的subString() 和 charIndex() 实现筛选 某个字段的部分数据

    subString(): SUBSTRING ( expression , start , length ) 参数expression 是字符串.二进制字符串.text.image.列或包含列的表达式 ...

  7. 我的linux学习日记day1

    红帽考试 1.RHCSA ------>RHCE 210/300分 2015 RHEL7 2020 RHCE8 8月1改每个月25号 所以我如果想要在6月份考试,就要在 5月25前预约一个考场可 ...

  8. 如何在Unity中画抛物线

    using UnityEngine; using System.Collections; using System.Collections.Generic; [ExecuteInEditMode] p ...

  9. Codeforces1144C(C题）Two Shuffled Sequences

    C. Two Shuffled Sequences Two integer sequences existed initially — one of them was strictly increas ...

  10. 使用Flutter开发的抖音国际版

    简介 最近花了两天时间研究使用Flutter开发一个抖音国际版. 先上图,个人感觉使用Flutter开发app快得不要不要的额.  两天就基本可以开发个大概出来.   最主要是热更新,太方便实时调整U ...