背景：

　　<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. 手把手教你进行Scrapy中item类的实例化操作

    接下来我们将在爬虫主体文件中对Item的值进行填充. 1.首先在爬虫主体文件中将Item模块导入进来,如下图所示. 2.第一步的意思是说将items.py中的ArticleItem类导入到爬虫主体文件 ...

  2. GroupJoin()各参数的意义及用法

    EF Core中GroupJoin的注释比较复杂: public static IEnumerable<TResult> GroupJoin<TOuter, TInner, TKey ...

  3. LFU C# 实现

    周六早上  做了下力扣的LRU 题目  后面接着看了LFU 缓存  难度提高了不少 首先 先说下 这2着 的差别把 LRU :最近 最少使用算法(Least  Recently Used).LRU 是 ...

  4. 【Hadoop离线基础总结】数据仓库和hive的基本概念

    数据仓库和Hive的基本概念 数据仓库 概述 数据仓库英文全称为 Data Warehouse,一般简称为DW.主要目的是构建面向分析的集成化数据环境,主要职责是对仓库中的数据进行分析,支持我们做决策 ...

  5. 【Hadoop离线基础总结】伪分布模式环境搭建

    伪分布模式环境搭建 服务规划 适用于学习测试开发集群模式 步骤 第一步:停止单节点集群,删除/export/servers/hadoop-2.7.5/hadoopDatas,重新创建文件夹 停止单节点 ...

  6. Linux安装tomcat并部署JavaWeb项目

    前提条件: 安装tomcat前请确认一下信息: 系统安装了JDK,且JDK版本应与javaWeb所使用的JDK一致,具体操作可参见Linux下安装JDK. 打包了javaWeb的.war 文件,具体操 ...

  7. Mysql常用sql语句（18）- union 全连接

    测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 前言 其实Mysql并没有全连接,Oracle才有全连 ...

  8. 可能会导致.NET内存泄露的8种行为

    原文连接:https://michaelscodingspot.com/ways-to-cause-memory-leaks-in-dotnet/作者 Michael Shpilt.授权翻译,转载请保 ...

  9. Mysql 常用函数（13）- right 函数

    Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html right 的作用 返回字符串 str 中最右边的 ...

  10. zookeeper和Eureka的区别

    RDBMS==>(MySql,Oracle,SqlServer等关系型数据库)遵循的原则是:ACID原则 A:Atomicity 原子性 C:Consistency 一致性 I:Isolatio ...