radio checkbox 点击文本实现选中效果

最新推荐文章于 2023-07-22 21:22:56 发布
最新推荐文章于 2023-07-22 21:22:56 发布
阅读量449 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43473995/article/details/90068001
版权

方法一:

直接在选择框的外层写上label标签

<label>
        <input type="checkbox" name="" value=""/> 线下
 </label>

方法二:

input中的id与label中的for相同,表示此label与input绑定

<input type="checkbox" id="underLine" name=""  value="" />
<label for="underLine">线下</label>

aaaaasdcgg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现点击文字，文字后面radio选中效果
baidu_41904590的博客
10-25 344
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 i
radio或者checkbox点击文字实现选择
云上人间钦自赏
11-21 3753
html自带的单选或者多选，都要点到控件才能选中，对于我这种不善于鼠标操作的人，确实不太方便，一直想实现点击文字实现选择的功能， 无意中发现有人实现了，方法超简单，但是忘记原作者的网址了，深表歉意。 否 是 只需要在每个选择框的外层套一个label即可，简单好用。
jquery选中radio或checkbox的正确姿势
weixin_34137799的博客
01-17 99
jquery选中radio或checkbox的正确姿势 Intro 前几天突然遇到一个问题，没有任何征兆的。。，jquery 选中radio button单选框时，一直没有办法选中，后来查了许多资料，发现自己的姿势有问题。 Issue 我按下面的方式选中 radio 时，发现有时候会选不中。 &lt;label class="t-radio t-circle-radio t-...
layui radio单选框点击事件控制DIV内容的显示与隐藏
最新发布
IF先生的博客
07-22 1733
根据单选框的选择内容来显示或隐藏相关的div.
radio元素样式修改 css
weixin_42704663的博客
05-30 239
<label class="radioBox" > <input id="item1" type="radio" name="in_out" value="0" checked> <label for="item1"></label> 进入 </label> <label class="radioBox"> &l...
实现checkbox&radio对齐的方法
09-22
这里的`<label>`元素通过`for`属性与对应的input元素关联，当点击label文本时，相应的input会被选中，提高用户体验。同时，通过`class`属性，我们可以为checkbox和radio应用之前定义的CSS样式。 完成以上步骤后，...
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
10-24
在JavaScript的库jQuery中，处理HTML表单元素如radio、select和checkbox的选中状态以及获取它们的选中值是常见的需求。以下是一些简洁直接的方法总结，供开发者参考。 对于`radio`单选按钮，要获取选中值，可以使用...
c#+JQurey实现获取radio和checkbox的值
09-04
在Web开发中，常常需要从用户界面收集数据，而radio和checkbox是常见的选择输入元素。jQuery库提供了便捷的方法来操作DOM（文档对象模型），从而轻松获取这些元素的值。 首先，让我们了解HTML部分。在这个例子中，...
HTML的checkbox和radio样式美化的简单实例
09-28
`<label>`元素与`<input>`元素关联，通过`for`属性（例如`<label for="ck101">`），确保当用户点击标签时，相应的输入元素会被选中或取消选中。 接下来，我们看CSS部分，这部分是实现样式美化的关键。CSS通过选择器...
背景透明的Static、Radio、CheckBox、GroupBox控件
07-05
本文将深入探讨如何实现背景透明的Static、Radio、CheckBox和GroupBox控件，这四个控件在许多应用程序中都非常常见，它们的功能分别是显示文本、单选按钮、复选框和分组容器。在传统的Windows GUI开发中，这些控件...
JS 获取Radio、CheckBox选中的值与文本
tmaczt的博客
09-19 1823
获取Radio选中的值 &amp;lt;input type=&quot;radio&quot; name=&quot;advancedBespeak&quot; value=&quot;1&quot;&amp;gt;是 &amp;lt;input type=&quot;radio&quot; name=&quot;advancedBespeak&quot; checked=&quot;
简单却实用的的例子：Jquery获取 radio 选中后的文字
weixin_39037804的博客
09-22 306
今天在 QQ 群里有朋友问到 jQuery 怎么获取选中 radio 后的文本，可见要熟练的使用 jQuery 应该很好的掌握 jQuery 选择器，下边就让我们简单看看这个问题。 首先，他给出的 H...
微信小程序radio checked选中问题
SoulKey的博客
12-26 4888
在开发小程序的过程中遇到了radio选中之后，又变成未选中状态的问题， <view class="cell_view_layout"> <radio style="margin: 0;height: 60rpx;width:100rpx;transform: scale(0.7)" :value="index...
uni-app中radio按钮的单选功能
热门推荐
anwen122311的博客
12-31 3万+
今天遇到了一个问题，关于uni-app实现单选功能，笔者查询了许多百度资料，发现都是用图片代替原有位置以实现取消选中，进而成为单选按钮。 这里我给大家带来我是如何实现的代码，现在看下代码: 前端页面: 我们要用vue的方法来给属性赋值,**":"**就是v-bind的简写 在这里:checked="binhao===1"就是 如果bianhao的值为1，则checked的属性值就是chec...
【js】点击radio后的文字实现选中效果
非正常人研究室
06-15 1937
只需要在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'>女<
获得Radio选中的后面文本框的值
weixin_30888413的博客
07-30 283
例如： 选中的radio的值在button中显示 代码如下： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></titl...
WeUI的radio与cheakedBox选中与设置选中问题
Mr.Yuan
11-10 2万+
cheakedBox判断的方法就是, 选定的元素是否有checked这个属性, 如果有就是已选中, 没有就是未选中 // 标签绑定的onchange = "changeState(this)" function changeState (ele) { if(ele.checked){ ele.removeAttribute('checked')
jQuery获取radio选中后的文字
zhanyouwen的博客
05-13 6663
jQuery获取radio选中后的文字
html多选框 美化,使用CSS美化radio和checkbox
06-01
当然可以使用 CSS 美化多选框（checkbox）和单选框（radio）。以下是一个简单的示例： HTML 代码： ```html <label class="checkbox"> <input type="checkbox"> <span class="checkmark"></span> Checkbox 1 </label> <label class="radio"> <input type="radio" name="radio"> <span class="checkmark"></span> Radio 1 </label> <label class="radio"> <input type="radio" name="radio"> <span class="checkmark"></span> Radio 2 </label> ``` CSS 代码： ```css /* 隐藏默认的 checkbox 和 radio */ input[type="checkbox"], input[type="radio"] { display: none; } /* 定义 checkbox 和 radio 的样式 */ .checkmark { display: inline-block; width: 20px; height: 20px; border: 1px solid #999; border-radius: 5px; cursor: pointer; position: relative; } /* 定义被选中的 checkbox 和 radio 的样式 */ .checkmark::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #999; border-radius: 50%; display: none; } input[type="checkbox"]:checked + .checkmark::after { display: block; } input[type="radio"]:checked + .checkmark::after { display: block; } /* 定义 label 的样式 */ label { display: block; margin-bottom: 10px; } /* 定义 checkbox 和 radio 的父元素的样式 */ .checkbox, .radio { display: inline-block; vertical-align: top; margin-right: 20px; } /* 定义 checkbox 和 radio 的文本样式 */ .checkbox span, .radio span { margin-left: 10px; font-size: 14px; } ``` 你可以根据需要调整样式，达到想要的美化效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值