通过label标记实现单选框点击文字也能选中
文章转载自：https://www.jb51.net/web/171886.html
在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上，下面有个示例，大家可以感受下：
<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同 。
例1：
<label for="man">
<input type="radio" value="男" name="man" id="man"/>
男
</label>
<label for="man2">
<input type="radio" value="女" name="man" id="man2"/>
女
</label>
例2：
<input type="checkbox" name="Pages" value="Job" id="Job" ><label for="Job">添加、编辑招聘信息</label>
<input type="checkbox" name="Pages" value="JobQuery" id="JobQuery" ><label for="JobQuery">查询、删除招聘信息</label>
<input type="checkbox" name="Pages" value="Technology" id="Technology" checked><label for="Technology">添加、修改科技项目</label>
通过label标记实现单选框点击文字也能选中相关推荐
- 单选/复选框中点击文字能选择该选项
4.单选/复选框中点击文字选择该选项--软设问题总结系列 为了提高用户体验,在单选/复选框中,点击文字选择相应选项这一操作是必不可少的. 因为单选/复选框的操作都差不多,所以本文以单选框作为例子说明: ...
- html 单选框、复选框 点击文字选中
html 单选框.复选框 点击文字选中 示例1(单选框) <input type="radio" value="1" id="score1&qu ...
- html单选框+点击取消选中,【前端JS】radio 可单选可点击取消选中
一般情况下 radio 单选框只能实现多选一的效果,但是一旦选择其中一个后,这个单选框就不可点击取消其选中状态了,这种功能在某些业务环境下并不适用,有时我们既需要单选框的多选一效果,也需要复选框的可点 ...
- html 勾选框点击文字勾选,ztree点击文字勾选checkbox，radio实现方法
ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...
- 微信小程序radio单选框如何修改宽高及选中样式
之前写过关于多选框设置样式的办法,其实与单选框设置的方法一样,唯一不同的是,在css样式里,/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */的下面定义的css需要加上!im ...
- ztree 点击文字也可以选中前面的复选框
分享一个小方法,实现ztree 点击文字,也可以选中前面的 复选框 radio 或者 checkbox 在设置树的时候,加上这句话 callback: { onClick: functio ...
- html点击一个文字显示提示框,点击文字弹出一个DIV层窗口代码
点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; ...
- php单选框点击取消,取消选中单选框radio的三种方式
本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的. HTML> 单选按钮取消选中 ...
- html中点击文字变色,html选中文字 背景/字 变色
iconfont使用,亲测 iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种 ...
最新文章
- 【java】httpclient的使用之java代码内发送http请求
- C++中 何时用. 何时用-」
- Java初级学习（转载http://www.cnblogs.com/biehongli/p/5737612.html）
- arm芯片厂家排名_国产芯片目前至少有10种，其中有3种，达到了世界顶尖水平
- Mysql ==》 单表查询
- 表单下拉框、表单修饰符（.lazy、.number、.trim）
- window server 2008配置FTP服务器550 Access is denied. 问题解决办法
- 域名被封跟服务器IP有没有关系？
- 金蝶实现EXCEL复制粘贴功能
- _corrupted_rollback_segments参数解决UNDO表空间损坏无法启动数据库的故障
- php 邮件 延迟发送,PHP后台隔5分钟发送email邮件_php
- virtualbox虚拟机识别U盘的详细教程
- 【记录】用Python webdriver图书馆抢座自动预约的正确姿势
- android游戏后台运行点击桌面游戏图标游戏重启的解决方法
- java生成报文_生成xml报文方法并输出
- 老板驾驭经理人与元老之十诫
- 使用CRM客户关系管理软件有哪些优势？
- 并行程序设计方法实验（包括openmp、向量化实现pi计算、SPECOMP2012测试、矩阵乘法优化）
- 【小程序】小程序研发平台解读 — 由来
- 深富策略：缺口压力仍存 突破有待观察