点击div任意一处触发其中的单选按钮

最新推荐文章于 2023-02-27 22:29:46 发布
最新推荐文章于 2023-02-27 22:29:46 发布
阅读量1.2k 收藏
点赞数
分类专栏： 小方法 文章标签： 单选 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37000055/article/details/101562653
版权
本文介绍如何在Vue项目中，通过监听div点击事件，触发其内部单选按钮的选择。通过利用$event参数，可以方便地获取当前元素和子元素，从而实现点击div任意位置都能激活单选按钮的效果。
摘要由CSDN通过智能技术生成

原本的单选按钮只能点击那个小圆才能触发，现在需求点击按钮所在的div就触发单选按钮。
这是一次vue开发的需求，但可以举一反三到其他开发当中去。

原来的效果：
在这里插入图片描述
原来的代码：

<div class="tempStyle">
      <input class="hy-radio" type="radio" name="a"><label
最低0.47元/天 解锁文章
摇曳de瘋丶
关注
专栏目录
Vue3 - Element Plus 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 3518
vue3，element plus，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element plus级联选择器设置checkStr选择任意一级选项,怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，
Vue - Element UI 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
最新发布
王佳斌
01-30 3894
vue，element ui，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element UI级联选择器设置checkStr选择任意一级选项,只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，并且选中后
简单实用的单选按钮切换div
04-14
简单实用的单选按钮切换div简单有效，可以直接看到效果
单选多个div
anchi8683的博客
10-17 126
var divs=document.getElementsByClassName("neirong4_1_red");if(divs.length>0){for(var i=0;i<divs.length;i++){if(divs[i].id!=idn){document.getElementById(divs[i].id).setAttribute('...
html点击某块区域触发条件,三种方法教你HTML实现点击某一个元素之外触发事件...
weixin_42316079的博客
06-04 3461
HTML实现点击某一个元素之外触发事件大致编写的HTML界面渲染后是这个样子的，我们现在想要实现的需求是点击Button所在的div不会触发事件，而在点击Button所在的div之外的区域时会触发事件，下面就来介绍三种方法实现。Button/* CSS代码 */.container{width: 400px;height: 400px;display: flex;align-items: cent...
jq实现点击div任意地方触发保存事件，但是触发div里的其他标签不触发保存事件
笑到世界都狼狈的博客
03-03 891
我项目中需要实现的效果大致如下图所示： 大致实现的思路如下： // 点击任意地方实现保存 $('.policyWhiteShow input').bind("click",function(event){ event=event||window.event; console.log('点击input！！！！！'); event.stopPropagation()...
用div实现单选按钮组，把按钮样式写活+排他功能实现
weixin_45096939的博客
11-15 1122
这是一个用div标签实现的单选按钮效果，配合点击方法，每次只能选择一个，选中的时候又添加样式。
『前端日志』基于Bootstrap框架实现单选按钮组
mad_house的博客
12-24 1623
目标：生成连在一起的三个按钮，点击任意一个按钮，该按钮会显示按下的样式，而另外两个按钮是未按下的样式。同时，为三个按钮分别添加触发函数。 问题：其实是参考的别人的代码，只是不太好找，所以记录一下。 代码： <!--以input和label实现的单选按钮组--> <div style="float : right" class="btn-gr...
Bootstrap JavaScript插件：按钮 (button.js)
WangMin@汪末末
09-10 1206
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 状态提示 通过自定义属性和简单的JavaScript，就可以让按钮具有状态提示功能。比如，没有点击按钮时，正常显示；点击按钮时，触发相应的状态，并显示该状态对应的文本信息。 1. 加载状态 要让按钮显示加载状态，首先要给按钮添加 data-loading-text 属性，它的值为加载状态要显示的文本信息，如 “Loading…”： <button type="button" id="myBu
单选按钮控制div
12-09
单选按钮控制div显示 本代码是5个单选 然后控制5个div
vue div 单选、多选，多选且最多只能选择三个
半盏茶. ོ
03-29 2729
一、先把准备工作做好 css .contilor{ width: 50%; margin: 5% auto; } .box{ display: flex; flex-wrap: wrap; } .item{ padding: 6px 8px; border: 1px solid #3C9CFF; margin: 8px 6px 0 10px; font-size: 12px; border-radius: 6px; } .item1{ background-color: #3C9CF
因为层级关系触发不到的点击事件
weixin_46451295的博客
09-09 362
pointer-events: none; 因为动画的层级关系导致下边元素的点击事件触发不到 给动画的css加上这个即可
Vue教程：如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式
wfeil211的博客
02-27 4559
Vue教程：如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式
JQuery 点击一个按钮触发另一个按钮的点击事件 trigger方法【记录】
单枪匹码
01-06 5601
1、前阶段需要点击一个按钮然后触发另一个元素的点击事件，当时找了度娘，发现了trigger这个方法，哎，这么好用的方法我竟然之前不知道，至此记录一下； 2、trigger()方法： trigger()方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。 该方法与triggerHandler()方法类似，不同的是triggerHandler()不触发事件的默认行为。 先不说他们两个的...
JavaScript--事件延展
look857857的博客
03-29 745
JavaScript--事件冒泡、事件默认行为、获取样式的兼容、offset家族、事件监听、事件委托
DIV点击单选效果
wx13227855087的博客
08-03 2263
//---------------html部分 &lt;head&gt; //自定义样式 &lt;style&gt;         .bgColor{            background-color: #9be7ff;         }     &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="d"&gt;
多个DIV类似radio单选效果
ZERO の BLOG
06-06 4399
基本代码及效果 HTML代码 &amp;lt;div id=&quot;left&quot;&amp;gt; &amp;lt;div class=&quot;left1&quot; id=&quot;2d&quot;&amp;gt;&amp;lt;img src=&quot;icon/2D-1.png&quot;&amp;gt;二维图表&amp;lt;/div&amp;
使用div作为单选按钮
07-27
你可以使用 `<div>` 元素来创建类似单选按钮的效果，但是它不是原生的单选按钮。你可以通过使用CSS和JavaScript来实现这个效果。下面是一个示例： HTML代码： ```html <div class="radio"> <div class="radio-option" onclick="selectOption(1)">Option 1</div> <div class="radio-option" onclick="selectOption(2)">Option 2</div> <div class="radio-option" onclick="selectOption(3)">Option 3</div> </div> ``` CSS代码： ```css .radio { display: flex; flex-direction: column; } .radio-option { padding: 5px; border: 1px solid #ccc; cursor: pointer; } .radio-option.selected { background-color: #f0f0f0; } ``` JavaScript代码： ```javascript function selectOption(option) { // 移除之前选中的选项 var selectedOptions = document.getElementsByClassName("selected"); for (var i = 0; i < selectedOptions.length; i++) { selectedOptions[i].classList.remove("selected"); } // 添加选中样式到当前选项 var currentOption = document.querySelector(".radio-option:nth-child(" + option + ")"); currentOption.classList.add("selected"); } ``` 在这个示例中，我们使用CSS来定义单选按钮的样式，并使用JavaScript来处理选项的选择。当用户点击一个选项时，`selectOption`函数会被调用，它会移除之前选中的选项的样式，并添加选中样式到当前选项。 请注意，这只是一种使用 `<div>` 元素来模拟单选按钮的方法，如果你需要更多的功能和可访问性，建议使用原生的 `<input type="radio">` 元素来创建单选按钮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值