实现点击文字，文字后面radio选中效果

最新推荐文章于 2024-12-05 10:12:47 发布

飞起来的大闸蟹

最新推荐文章于 2024-12-05 10:12:47 发布

阅读量447

点赞数 2

分类专栏：前端学习笔记文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/baidu_41904590/article/details/120952810

版权

前端学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何使用JavaScript或jQuery实现HTML中的<label>元素与<input> radio按钮之间的联动效果，当点击<label>时，对应radio会被选中。通过for属性和id的关联，简化表单交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.js或jQuery实现

2.lable标签实现:label 的for属性后面跟着input的id,点击label，触发input效果

<form>
<label for="male">Male</label>
<input  id="male" type="radio" name="sex" value="0" />
<br/>
<label for="female">Female</label>
<input id="female" type="radio" name="sex" value="1" />
</form>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

飞起来的大闸蟹

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2/3+element - 将级联选择器el-cascader修改为“点击文字就能选中“效果，单选/多选模式下点击label整行都可以直接选中，复选框多选模式下解决只能点击图标才能选中的问题

高级前端工程师

07-23

3587

vue2，vue3，element plus，级联选择器，el-cascader，点击文字就能选中，如何修改成点label就能选中，单选，多选，复选框，单选框，模式，饿了么组件库，无法通过点击整行直接选中的问题，点击文字行就能选择后弹框收起，选中完弹框无法收起，级联选择点击文本选中多选，不生效，有问题，原来的功能受影响，点击文字可选中去掉单选按钮选中后菜单收起，ElementUI Cascader 级联选择器实现点击文本选中，懒加载的数据怎么办，动态数据请求，多选模式下点击label文本选择，点击文本直

radio选中状态对应文字改变颜色

sinat_23668639的博客

12-01

8317

效果： html: 本人申请代替他人申请css: .radio { width: 18px; height: 18px; border: 2px solid #649723; margin-top: 20px; } .radio-font { font-size: 18px; margin-right: 25px; color:#767676; margin-top

参与评论您还未登录，请先登录后发表或查看评论

jquery实现ul列表中点击radio后面的文本选中radio,点击整个li选中radio

心如止水

06-20

5392

window.onload = function () { //点击radio后面的文本选中radio // labels = document.getElementById('scalul').getElementsByTagName('span'); // for (i = 0, j = labels.length; i // labels[i].oncli

input的radio实现点击文字，后面的框框也选中的效果

有问题可关注公众号：前端研究院后台输入问题回复

05-26

1665

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p span{font-size:10px;-webkit-transform:scale(0.8);display:block;} </style> </head&gt...

【js】点击radio后的文字实现选中效果

非正常人研究室

06-15

2039

只需要在input后面的文字套一个label,然后加上for属性,值是对应的radio的id值<input type='radio' id='male' name='sex' value='M'><label for='male'>男</label> <input type='radio' id='female' name='sex' value='F'><label for='female'>女<

HTML - 学习笔记 - 点击文字选中 radio

灵台方寸山斜月三星洞

01-12

1251

两个方案都是配合 label 标签来实现。 label 嵌套 radio label 的 for 属性与 radio 的 id 关联 <div> <label> <input type="radio" name="jerry" value="1">label 嵌套 radio </label> </div> <div> <input type="radio" id="r2" name="jerry" value=

radio或者checkbox点击文字实现选择

云上人间钦自赏

11-21

3847

html自带的单选或者多选，都要点到控件才能选中，对于我这种不善于鼠标操作的人，确实不太方便，一直想实现点击文字实现选择的功能，无意中发现有人实现了，方法超简单，但是忘记原作者的网址了，深表歉意。否是只需要在每个选择框的外层套一个label即可，简单好用。

js实现选择不同radio改变文本框编辑状态.txt

07-26

js实现选择不同radio改变文本框编辑状态。多多指教。

产品经理又提需求了：input radio 属性，在点击 label 时也可切换选中状态

超逸の学习技术博客

01-23

1067

背景产品经理又来提需求啦，原本是默认点击那个圆框的，后面需要点击 label 文本也可以支持切换。解决方式简单，安排！ $('.radio-list').on('click', function(e) { $(`input[type='radio'][name='content-radio'][value=${radioList[e.target.innerText]}]`).prop("checked",true); $(`input[type='radio'][name='radi

radio 点击文字选中

diaosui7664的博客

05-11

240

医疗付费方式:<input name="FUKUANFS" dbname="FUKUANFS" class="input1" checked="checked" type="radio" value="1" id="FUKUANFS1" /> <label for="FUKUANFS1">1.城镇...

js 实现单击文字实现单选框的选定

03-31

js 实现单击文字实现单选框的选定! 值得下载看看!资源免费,大家分享!!

点击radio后面的文字勾选框选中

林逗哥

08-21

4783

在开发过程中会发现，必须点击圆圈圈的时候才能触发选中，这种体验不是很好，下面是两种点击后面的文字时触发的勾选。第一种： <form action=""> <input type="radio" name="sex" value="male" id="radio1"> <label for="radio1"

前端百科---点击文字选中Radio

u013390913的专栏

12-23

946

在进行Web过程中,Radio单选是必不可少的.但是如果用户只能通过点击Radio的圆圈才能实现选项的选择,这样就会导致交互不够好... 怎么解决呢?使用JavaScript当然可以,但是直接使用HTML5自带属性不是更好吗? 废话少说,直接上demo: 第一种:label标签使用for属性指向input:radio; 第二种:直接将in

点击后边文字选中radio

我能坚持多久的专栏

09-07

568

效果：原理： for属性指定要绑定的元素的 id；正常备案异常备案再对《ul》、《li》的标签做样式调整即可满足各种需求；

点击单选按钮radio后面的文字即可选中单选按钮

w__yi的专栏

05-02

3万+

关键字：radio 单选按钮文字选中有时候我们在网页中填写某些表单时，可能会遇到单选按钮，如让你选择性别是男或是女，此时用户往往会去点击单选按钮那个小小的圆圈，由于单选按钮比较小，可能会点不到，所以最好是点击单选按钮后面的文字就能直接选中单选按钮。 input type="radio" id="male" name="sex" checked="checked"

uniapp radio-group实现点击radio选项后的文字选中选项