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

最新推荐文章于 2024-07-01 15:10:12 发布

云上人间钦自赏

最新推荐文章于 2024-07-01 15:10:12 发布

阅读量3.7k

点赞数

分类专栏： Div+Css 文章标签： checkbox radio 点文字

Div+Css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

html自带的单选或者多选，都要点到控件才能选中，对于我这种不善于鼠标操作的人，确实不太方便，一直想实现点击文字实现选择的功能，

无意中发现有人实现了，方法超简单，但是忘记原作者的网址了，深表歉意。

<label>
	<input type="radio" name="sfjcf"  value="0" checked="checked" />否
</label>
<label>
	<input type="radio" name="sfjcf"  value="1" />是
</label>

只需要在每个选择框的外层套一个label即可，简单好用。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

云上人间钦自赏

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

高级前端工程师

07-23

2753

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

checkbox与文字对齐的方法

czh60144的博客

07-16

3201

checkbox与文字对齐的方法

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

点击单选框文字也能选中radio

weixin_34192732的博客

12-29

2396

为了提高用户体验，使得点击单选框圈圈旁边的文字也能把点选框选中第一种方式：<label for="radiobutton"> <input type="radio" name="radiobutton" id="radiobutton" value="radiobutton" />测试？ </label> 复制代码

选择框实现点击文字也能够勾选或取消复选框

热门推荐

诗人江湖老的专栏

04-06

2万+

原文地址 <html> <head> <title>test</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> </head> <body> <form> 第一种：文字必须是label标签内,che

使用纯CSS美化radio和checkbox

04-28

由于浏览器的安全策略，直接操作radio和checkbox的样式受到限制，但我们可以通过给它们的父元素或者相邻元素设置样式，间接实现美化。以下是一些常用的技术： 1. **隐藏原生元素**：首先，我们可以使用`display: ...

label标签使用，点击文字就能选中或取消选中复选框checkbox/单选框radio的两种方法

zcc的博客

12-08

5938

效果是点击文字就能选中复选框checkbox/单选框radio 或者是取消选择复选框checkbox/单选框radio。一、单选框第一种方法：文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同。 <div class="radio-inline"> <input type="radio" name="killOrder" id="killOrder1" value="1"/> <lab

Android CheckBox中设置padding无效解决办法

01-20

解决CheckBox点击响应问题的一种可行方法是通过自定义View或者扩展CheckBox类，重写`onDraw()`方法，手动调整图片的位置和大小，以确保点击区域足够大。另一种解决方案是使用自定义的Drawable，通过设置Drawable的...

019_UI_常用组件-BasicViews-button-checkbox-radio

11-01

在Android UI设计中，BasicViews是一组基础的视图组件，包括按钮（Button）、复选框（Checkbox）和单选按钮（Radio Button），这些都是构建用户界面不可或缺的部分。本教程“019_UI_常用组件-BasicViews-button-...

点击文字选中checkbox复选框 checkbox绑定文字

wushijuewu

02-19

1573

实现的代码如下：第一种方法：文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同。实现代码如下： <input type="checkbox" id="check1" value="123" name="name" class="check"> <label for="check1">姓名</label> <br> <input type="checkbox" id="check2"

checkbox文字点击跳转以及 Html.fromHtml()失效

julystroy的博客

12-03

1498

Android开发过程中会遇到很多一行文字里有其他颜色的字体，或者给一行文里的某个短语给予点击事件，类似于超链接进行跳转…说的这些，最具代表性的就是登陆或者注册界面的：需求： 1.单选框----我们第一感觉checkbox是最合适的； 2.文字改变颜色----- Html.fromHtml()，可以简单实现； 3.有其他颜色字体拥有点击事件-------click？需求1，2可以实现样式效果...

checkbox和后面的文字对齐解决方案

01-10

1万+

checkbox和后面的文字如果不加样式，会导致checkbox和文字对齐，解决办法是对checkbox和文字同时添加如下样式： vertical-align:middle; 1 如例所示： c:forEach var="user" items="${userItem}"> type="checkbox" value="${user.map.YHID}

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

weixin_43473995的博客

05-10

502

方法一: 直接在选择框的外层写上label标签 <label> <input type="checkbox" name="" value=""/> 线下 </label> 方法二: input中的id与label中的for相同,表示此label与input绑定 <input type="checkbox" id="underLi...

itext操作pdf表单域

苏暖午后

01-20

2万+

itext简介表单域 text域 radio button 表单域赋值去除表单域 PDF TO Image 写这个纯属是为了总结最近所学的知识，也是为了给后面用的到人的一些帮助。因为自己在国内查找了不少资料，但都不是自己想要的。背景：创建合同时，需要填写某些文本域、radio、checkbox还有最后需要对合同签名，所以需要研究使用，而不是采用外部编辑器。 it

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

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

05-26

1507

<!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...

html 5——如何点击文字也能选中复选框、单选框、文件上传、文本域、下拉选择框、按钮、元素分类

ranran0306的博客

03-01

4559

1、如何点击文字也能选中复选框（1）.<label><input type="checkbox">跳舞</label> （2）.<input type="checkbox" id="abc"><label for="abc">爱好</label> 2、复选框如何默认选中 <checked="checked">或checked 3、单选框 <input type="radio" name=""> 注

radio checkbox的点击事件怎样实现

06-06

在前端开发中，可以通过以下方式实现 radio checkbox 的点击事件： 1. 使用原生 JavaScript 的方式： - radio 点击事件 ```html <input type="radio" name="gender" value="male" onclick="handleClick(this)"> <input type="radio" name="gender" value="female" onclick="handleClick(this)"> <script> function handleClick(elem) { console.log(elem.value); } </script> ``` - checkbox 点击事件 ```html <input type="checkbox" name="hobby" value="reading" onclick="handleClick(this)">阅读 <input type="checkbox" name="hobby" value="music" onclick="handleClick(this)">音乐 <script> function handleClick(elem) { console.log(elem.value + ' ' + elem.checked); } </script> ``` 2. 使用 jQuery 的方式： - radio 点击事件 ```html <input type="radio" name="gender" value="male"> <input type="radio" name="gender" value="female"> <script> $("input[name='gender']").on("click", function() { console.log($(this).val()); }); </script> ``` - checkbox 点击事件 ```html <input type="checkbox" name="hobby" value="reading">阅读 <input type="checkbox" name="hobby" value="music">音乐 <script> $("input[name='hobby']").on("click", function() { console.log($(this).val() + ' ' + $(this).prop("checked")); }); </script> ``` 通过这些方式，我们可以实现 radio 和 checkbox 的点击事件，并在点击时执行相应的操作。