如果不推荐使用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

Html基础知识点整理

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

9942 0

【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

寒假提升｜ 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

2.9K2 0

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

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

2141 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

IT课程 HTML基础 013_表单和用户输入

密码字段如果你需要用户输入密码，可以将元素的type属性设置为 “password”，输入的内容会被隐藏起来。...单选按钮（Radio Buttons）单选按钮和复选框可以让用户在多个选项中选择一个或多个。单选按钮的type属性值为 “radio”。...="sex" value="female">女效果：单选按钮的 name 属性值必须相同，否则它们将不会属于同一个组。...checked 属性用于指定单选框是否默认选中。...value、selected radio 选择用于接收单选用户输入。它可以包含多个单选框。 name、value、checked checkbox 选择用于接收多选用户输入。

901 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.7K2 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

html 下

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

2.8K3 1

CSS中如何修改浏览器自带样式

---- 如下代码，使用选择器选中了radio与checkbox,但设置的样式不生效 input[type="radio"],input[type="checkbox"] { border:...如何修改 ---- 答案是可以修改，使用appearance属性，代码如下： input { -webkit-appearance: none; -moz-appearance: none;...---- 默认情况下，单选按钮（和复选框）使用这些控件的操作系统本机样式设置样式。...https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/radio 兼容性说明：如果要使用该appearance属性，则应非常仔细地对其进行测试...代替appearance,修改浏览器自带样式（如:radio） ---- 不需要用到js, 而是纯css, 个人推荐使用此方法，巧用了将radio隐藏，然后通过label的for属性来改变radio的选中状态

1.7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云