如果不推荐使用name属性,如何独家选择单选按钮？

在前端开发中，如果不推荐使用 name 属性，可以使用 data-* 属性来独家选择单选按钮。data-* 属性是 HTML5 引入的一种自定义属性，可以在 HTML 元素上存储任意的键值对。

例如，可以在单选按钮中添加 data-custom 属性：

然后，可以使用 JavaScript 来监听单选按钮的变化，并根据 data-custom 属性的值来执行相应的操作。例如：

document.querySelectorAll('input[type="radio"]').forEach(function(radio) {
  radio.addEventListener('change', function() {
    if (this.checked) {
      console.log('选中了', this.getAttribute('data-custom'), '选项');
    }
  });
});

这样，就可以在不使用 name 属性的情况下，独家选择单选按钮。

相关·内容

前端成神之路-列表和表单

4. checked属性表示默认选中状态。较常见于单选按钮和复选按钮。... 用户名：适合单个表单选择 第二种用法 for 属性规定 label...我们现在做页面，不写看不到效果，但是如果后面学 ajax 后台交互的时候，必须需要 form表单域。...2.6 团队约定元素属性元素属性值使用双引号语法元素属性值可以写上的都写上推荐：不推荐： <input type="radio" name="name" checked

1.6K2 0

JavaScript 表单处理

['yourForm'];//使用forms的名称下标获取元素 document.yourForm;//使用name名称直接获取元素 PS：最后一种方法使用name名称直接获取元素，已经不推荐使用，这是向下兼容的早期用法...如果多个表单字段都使用同一个name，那么就会返回该name的NodeList表单列表。...value是最推荐使用的，它是HTML DOM中的属性，不建议使用标准DOM的方法。...所以，如果使用alert()的话，导致跨浏览器的不兼容。我们没有办法让浏览器行为保持统一，但可以通过不去使用alert()来解决。...通过checked属性来获取单选按钮的值。

4.8K10 1

7-2.表单-HTML基础

2.name属性（1）不添加name属性在上述两个例子中，我都使用了name属性，但和我去掉name属性的效果一样，但是通过点击单选框会发现。...若我们不添加name属性，我们可以在单选框中选择多个选项，这就和单选框的用意相违背。（2）name属性取值不一样 <!...单选框示例name属性取值不一.png 若name属性取值不一样，我们也可以在单选框中选择多个选项，这就和单选框的用意相违背。...两者均设置name属性，单选框只能选中一项，而复选框可以选择多项，这是因为浏览器会自动识别这是“单选框组”还是“复选框组”（这是根据type属性取值来识别如果是单选框组，就只能选择一项；如果是复选框组,...就可以选择多项）通过使用checked属性使得在默认情况下，让复选框中的某项选中,。

2.3K2 1

【JavaWeb】77：仔细看一哈这张图片

表单的作用是将数据提交给服务器，至于具体是如何提交的，暂时还不清楚，后续会学习到。在我们现实生活中也挺常见的，有时会使用到的注册页面就可以理解成一个表单。 ?...「3表单按钮」注册按钮也就是其中的一种。 form其子标签有：input（输入的内容），select（下拉框），textarea（文本域）现在用代码演示表单是如何写出来的。...「②单选框功能完善」如果name设定是一样的，那么就只能选择一个，不然就算都是单选框，但是name不一样，还是可以多选。 value表示其对应的值，比如用0表示是男，1表示是女。...checked="checked"，这个可以用来指定单选框的默认值。其中我通过测试发现：「如果单选框中都有这个默认属性，那么默认值是最后面的那个单选框。」...size属性：多选时用以表示一次显示的数量。如果不用multiple属性，这是单选，也就是图中右下角。「2文本域」 ? name属性：提交时需要，不再赘述。 rows属性：文本域中的行数。

1.3K2 0

前端之form表单与css（1）

表单包含input系列标签如文本字段、复选框、单选框、提交按钮等。...（对于DOM使用：document.form.name） novalidate 规定浏览器不验证表单规定action属性中地址的目标（默认：_self） 1.2input input元素会根据不同的...> name和value是页面往后端发送的数据的key和value(所有获取用户输入的标签都应该有name属性)，当点击提交按钮时会向后端提交数据，当点击reset按钮时会重置所有选择框的数据。...用户名等输入框的value是框内的默认值，也就是如果有输入就按输入来，如果没有就使用默认值。...2.3.1行内样式行内样式指在标记的style属性中设置css样式，不推荐使用。

1.9K1 0

表单

，如何将数据发送给服务器，他指向服务器发送数据的方法。...设置了type属性后在密码框输入的字符全都是以黑色实心的来显示，从而实现对数据的处理单选按钮　　用户只能选中一个单选按钮在使用单选按钮时，需要一个显示的...value属性　　如果需要一个默认的选项即可以，使用checked 属性男男女列表框　　列表框目的主要是使用户快速方便的选择一些选项而且节省空间 <option value...属性设置为hidden隐藏类型即可创建一个隐藏域表单的只读与禁用　　只读场景　　　　　　网站服务器方不希望用户修改数据

4.7K9 0

Html基础知识点整理

. 标签表单标签文本框，密码框，单选框相关知识点复选框相关知识点附件框----用于文件上传重置按钮----reset 普通按钮隐藏域只读属性和设置不可用属性...对应单选框来说，在同一组内，具有单选效果。单选框如何分组呢? name属性，name值相同的为一组提交按钮: 注意: ?...后面是参数列表如果单选框里面不指定value属性，那么提交给数据库里面的数据显示都为on，无法区分选择的性别是什么这里参数列表里面没有用户名和密码，说明用户名和密码没有被提交，之所以没有被提交...，是因为我们没有设置其的参数名，即name属性我们也可以直接给用户名和密码提供一个初始值，通过设置其value属性来完成单选框默认勾选某个选项完整代码: <!...重置按钮----reset ---- 普通按钮注意：如果要设置按钮名字，可以通过设置value属性来完成效果演示: 这里普通按钮设置后，点击没有用，需要和js的事件取连着用 ----

9972 0

【HTML5】html5开篇基础（5）

包含一个type属性,根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮等)。...选择控件单选按钮（）用户只能选择一个选项，通常用于性别、是/否等单选情况。 ...input标签常用属性 name属性 name是每个表单元素都有的属性值,主要给后台人员使用，方便后台人员识别并处理数据。...除此以外我们还要注意在选择控件中其name属性必须要相同，这样单选按钮才能实现单选功能（否则就能多选），复选按钮也同理。..." value="重置按钮"> 所以value在选择控件中是不设置的。

971 0

寒假提升｜ Day7 CSS 第五部分

) 表格中的行 td(table data) 行中的单元格另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了 2.2....常见表单 form 表单, 一般情况下，其他表单相关元素都是它的后代元素 input 单行文本输入框、单选框、复选框、按钮等元素 textarea 多行文本框 select、option 下拉选择框 button...如果要给布尔属性设值，值就是属性名本身 3.3. input模拟按钮表单可以实现按钮效果: 普通按钮(type=button):使用value属性设置按钮文字重置按钮(type=reset...input变成选中 3.5. radio/checkbox radio的使用我们可以将type类型设置为 radio 变成单选框: name值相同的 radio 才具备单选功能 checkbox...、通用选择器、属性选择器、类选择器、id选择器、伪类(除否定伪类) :not(x)表示除x以外的元素

1K1 0

在 Vue 中创建自定义输入

如果要构建自定义输入组件，我们一定会想到直接使用 v-model 指令。可悲的是，当我在 Vue 中查看单选按钮或复选框的自定义输入的示例时，他们根本没有考虑 v-model ，或者没有正确的使用。...正常的 select 元素也会像这样，尽管 multiple 多项选择有所不同。单选按钮那么，单选按钮呢？...那么我们如何确定哪个用例呢？你可能会认为我们需要确定是否有其他复选框具有相同的 name 属性，但这并不是 Vue 的内置系统所使用的。...就像单选框一样，Vue 根本不考虑 name 属性，它只是在本地提交表单时使用。那么你可能认为它会根据是否有其他复选框共享相同的 model 来确定，但也不是这样。...这将允许它更紧密地遵循单一责任原则，但如果你正在寻找选择框的替代品，那么这就是你正在寻找的（加上所有其他有用的属性和自定义功能的添加）。

6.4K2 0

HTML第二天

name 属性 value 属性：用户输入的内容，提交之后会发送给后端服务器 name 属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义文本框：****...=”radio” name=”sex” value=”nan” checked>** 有相同 name 属性值的单选框为一组，一组中同时只能有一个被选中 checked–默认选中复选框: <type=...普通按钮，默认无功能，配合 JavaScript 添加功能如果需要实现以上按钮功能，需要配合 form 标签使，用 form 标签把表单标签一起包裹即可 button 按钮标签：**<type=”button...input 里面写 1️⃣使用方法： 1、使用 label 标签把内容（如：文本）包裹起来 2、在表单标签上添加 id 属性 3、在 label 标签的 for 属性中设置对应的 id 属性值没有语义的布局标签...placeholder 单选框 password placeholder 单选框 radio name/checked 多选框 checkbox checked 文件选择/文件上传 file multiple

3K2 0

【Java 进阶篇】深入了解HTML表单标签

标签用于提供文本框的标签，for属性与的id属性关联，以确保点击标签时可以聚焦到相应的输入框。单选按钮和复选框单选按钮和复选框用于选择一个或多个选项。...单选按钮使用标签的type="radio"，而复选框使用标签的type="checkbox"。...（单选按钮）和爱好选择（复选框）的表单元素。...name属性用于将单选按钮或复选框分组，确保用户只能选择一个单选按钮或多个复选框中的选项。下拉列表下拉列表允许用户从预定义的选项中选择一个。它使用和标签创建。...用户可以从下拉列表中选择一个国家。提交按钮提交按钮允许用户将表单数据提交给服务器进行处理。使用标签的type="submit"属性创建提交按钮。示例： <!

2251 0

全网最新、最全的jQuery核心知识，你真的不想点开看看嘛？

表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的注意：无论是否存在表单，表单选择器都会根据相应的type属性值做出选择。...表单选择器主要是根据 type值进行定位的只有type属性的标签才具有表单选择器 <input type="radio...") 11.2 表单对象属性过滤器 :txet 和 :checkbox 代表的是表单选择器代表的是表单中的type属性选择可用的文本框 $(":text:enabled") var obj=(":text...该方法给 API 带来很多便利，推荐使用该方法语法：$("选择器").on( "事件名称" ，事件的处理函数) 事件名称：就是js事件中去掉on的部分（js中onclick on事件中 click...注意：如果这这里使用的是.post()函数，在服务端要使用doPost方法给浏览器返回数据，所以此时应该将服务端的代码写入到 doPost方法体中如果是 .get()写到doGet中.post()写到

5.9K1 0

HTML表单和组件

表单组件之引入组件标签引入的组件用于收集用户输入的内容，例如文本框、单选框复选框、密码框等等，这个标签最主要的属性是type，这个属性用于选择你需要使用什么样的组件...以上就是type属性里常用的组件 name属性，当数据提交到服务器时会读取这个属性里的数据。...这个属性还有一个作用，在使用单选框要实现单选时也需要使用这个属性，如果没有加上这个属性的话，就无法实现单选，示例： ? 运行结果： ?...require属性，表示必填项，这个属性的关键字也只有一个，所以不写值也可以，如果这个加上这个属性的组件没有填写信息的话，表单就不会进行提交，示例： ? 运行结果： ?...不常用属性： checked，这个属性在单选框或者复选框上使用，哪个单选框或者复选框上声明了这个属性，那么就会默认选择声明了此属性的组件，示例： ? 运行结果： ?

2.7K6 0

JavaWeb01轻松掌握HTML（Java真正的全栈开发）

) 属性: name:定义标签名称(规定单选框的名称，通过name进行数据传递,分组) 注意:对于单选按钮,如果要想做到单一选择多个radio的name值必一样 value:定义标签值(实际上提交的数据...wrap:规定多行文本框如何换行初始化内容三.其他标签标签:元素可提供有关页面的元信息; 标签位于文档的头部,不包含任何内容....-- input 标签 type=”radio“ 时为单选框或者单选按钮 name：规定单选框的名称，通过name进行数据传递,分组。 value：实际上提交的数据。 checked：默认选择。...-- input 标签 type=”radio“ 时为单选框或者单选按钮 name：规定单选框的名称，通过name进行数据传递,分组。 value：实际上提交的数据。 checked：默认选择。...其它常用属性: name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radio的name值必一样. value:定义标签值 checked:定义该标签默认被选中. checked=”checked

5.2K5 0

Python Tkinter Gui 常用组件介绍基本使用

点击这个按钮将会在这两个值间切换，一组方框,可以选择其中的任意个 Radiobutton 单选框一组可选框,其中只有一个可被"选中" ，以当前勾选的值为准 Entry 文本框文本输入框，文本输入域...，推荐此方法属性/参数描述 row 设置行数 rowspan 设置跨行数量，控件实例所跨的行数，默认为 1 行，通过该参数可以合并一列中多个领近单元格 column 设置列数 columnsapn...,滚动文本域实时更新日志，建议复制代码运行仔细观察一下有助于理解该示例使用了grid()网格布局，输入组件，标签组件，文件选择组件，单选框组件，复选框组件，按钮，滚动文本域，大部分都写了注释哈; import...def param_print(self): # 如果输入地址和文件选择按钮的值都为None,则提示 if len(self.file_input_entry.get...return False # 如果输入地址为空则选用文件选择按钮的值 if len(self.file_input_entry.get().strip()) > 1:

2.8K2 0

文档和元素的几何滚动

('#shipping input[type="radio"][name="method"]'); 使用document.forms来进行选择表单,返回的是一个类数组 document.forms 对于表单使用...false，则不会重置同样，如果使用表单的onreset()方法也不会触发该事件，将会直接进行重置。...单选元素为整组有相关性的元素而设计的，组内所有按钮的HTML属性name值都相同。按照这种方式创建的按钮为互斥的。利用表单属性的名字选中元素时，它返回的一个类数组对象而不是单个元素。...当用户单击按钮，会触发onclick事件，由于改变状态会触发onchange事件，但是，当用户单击其他单选按钮而导致这个单选按钮状态的改变，后者不触发onchange事件。...对于该元素，依旧可以使用value和onchange事件处理程序。选择框和选项元素当用户选取或取消选择一个选项时，select元素将会触发onchange事件处理程序。

5.2K0 0

HTML基础03-HTML标签（下）03-表单标签

03-表单标签 3.1为什么需要表单使用表单的目的是为了收集用户信息。在网页中，如果需要与用户进行交互，收集用户资料，此时就需要表单。...在标签中包含一个type属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本字段、复选框、掩码后的文本字段、单选按钮、按钮等）。...="单选按钮"/> radio2 radio3 <br...是表单元素的名称，要求同一组单选按钮或同一组复选框有相同的name值 checked属性主要针对于单选按钮和复选框，作用是打开页面时默认选中某个单选按钮或复选框下拉表单元素使用场景：...在页面中，如果有多个选项让用户选择，并且想要节省页面空间，就可以选择使用标签来定义下拉列表。

3.1K1 0

🔥《手把手教你》系列基础篇之4-python+ selenium自动化测试-xpath使用（详细教程）

在网页上面的文本输入框，按钮，多选，单选，标签，和文字都叫元素，总之，凡是能在页面显示的对象都可以作为页面元素对象。...这里用火狐浏览器百度首页的一个单选按钮来举例；火狐浏览器上firepath给出的推荐表达式是：这里推荐的XPath是根据目标元素节点中id信息来定位的，这个通过id就能定位，当然好。...有时候，如果这个id不能作为参考值，我们需要利用相对定位方法来定位这个新闻标题前面的单选按钮； 1）先根据value = google_web 或者text()=谷歌来定位“谷歌”这个标签。...2.4 使用逻辑运算符如果一个属性不能唯一的区分一个元素，我们还可以使用逻辑运算符连接多个属性来区别于其它属性。...如果您觉得阅读本文对您有帮助，请点一下左下角“推荐”按钮，您的“推荐”将是我最大的写作动力！另外您也可以选择【关注我】，可以很方便找到我！

1K5 0

VBA表单控件（三）

大家好，上节演示了数值调节钮和滚动条的小示例，本节开始介绍单选框、分组框和复选框控件的内容。一、单选框单选框在网页中一般都有遇到，下面介绍如何在工作表中添加单选框，以及如何使用。...加入了多个单选框后，它们实际组成一组，点击单选框前的圆形选择框，可以发现只能选择其中一个。具体使用时，在单选框控件上右键，选择设置控件格式--控制--单元格链接--选择显示结果的单元格。...同样右键选择设置控件格式，也可以选择属性，来控制控件的位置和大小。也可以编辑文字。单选框也可以指定宏，但并不常用可以，可以根据需求使用。...二、分组框上面示例多个单选框就像是单选题，一道题和多个单选选项。如果有多道单选题如何实现呢？这就需要借助分组框，将不同组的单元框分隔开。...设置完成后，复选框中选中后在链接单元格中会显示TRUE（对应数值1），而如果不选中则显示FASLE（对应数值0）。后面可以利用返回值结合函数和图标等扩展使用。

4.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云