单击 label 触发 checkbox,checkbox 触发 click

迭代盆景
• 阅读 872

在桌面程序中,checkbox 后面是带文字的,单击文字就会选中或取消选中选择框,点起来很方便,但 HTML 中 checkbox 是干的,单起来非得把鼠标移到那个小小的 checkbox 框框上。

要想实现桌面程序的效果,可增加一个控件 label。

<input
type="checkbox" id="c1"
name="c1" value="c1"
/>

<label for="c1">点我</label>

如上代码,点 label 的文字,前面的 checkbox 就会被选中,再点击就会被取消。

令人欣喜的是,点 label 跟点 checkbox 一样,都会触发 checkbox 的 click 事件,这就方便了我们 DOM 编程。

之前没有认识到label for这个功能是跟checkbox默认绑定关联的,以为还需要自己绑定点击事件呢,其实根本不需要的。

新认识,新收货。

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
vue input复选框checkbox默认样式纯css修改
<divclass"data_list"vfor"(item,index)indata_list":key"index"<inputtype"checkbox"class"check_boxtuicheckbox":id"'id'item.id":value"item.id"vmodel
CuterCorley CuterCorley
4年前
uni-app入门教程(4)组件的基本使用
@toc前言本文主要介绍了uniapp中的组件,包括四大类:基础组件(scrollview、swiper、text等)、表单组件(button、checkbox、input等)、导航组件navigator和页面传参、媒体组件(audio、image和video等),详细说明了这些组件的常用属性和方法,并进行使用举例和演示。一、基础组件组件是视
菜园前端 菜园前端
2年前
JavaScript中常用事件
原文链接:鼠标事件鼠标单击事件click在文档中鼠标进行单击,就会触发事件。javascriptvari0document.addEventListener('click',function()console.log(i))鼠标双击事件dblclick
浩浩 浩浩
4年前
【Flutter实战】单选框和复选框
3.6单选开关和复选框Material组件库中提供了Material风格的单选开关Switch和复选框Checkbox,虽然它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父组件来管理的。当Switch或Checkbox被点击时,会触发它们的onChanged回调,我们可以在此回调中处
Stella981 Stella981
3年前
PyQt—QTableWidget中的checkBox状态判断
一、QTableWidget实现checkBox效果利用QTableWidgetItem对象的CheckState属性,既能显示QCheckBox,又能读取状态tableQtGui.QTableWidget()checkBoxQtGui.QTableWidgetItem()checkBox.setCheckSt
Stella981 Stella981
3年前
Spring Boot 2 + Thymeleaf:表单字段绑定、表单提交处理
SpringBoot中Thymeleaf对表单处理的一些用法:(1)使用th:field属性:进行表单字段绑定(2)使用ids对象:一般用于lable配合radio或checkbox使用(3)表单提交处理开发环境:IntelliJIDEA2019.2.2SpringBoot版本:2.1.8新建一个名称为demo的Spr
Wesley13 Wesley13
3年前
VBA中msgbox的用法小结
1、作用在消息框中显示信息,并等待用户单击按钮,可返回单击的按钮值(比如“确定”或者“取消”)。通常用作显示变量值的一种方式。2、语法MsgBox(Prompt\,Buttons\\,Title\\,Helpfile,Context\)参数说明:(1)Prompt,必需的参数,为字符串,作为显示在消息框中的消息文本。
Stella981 Stella981
3年前
Android CheckBox修改大小、边框颜色,以及自定义CheckBox;
CheckBox修改大小:android:scaleX"0.8"android:scaleY"0.8"CheckBox修改边框颜色,注意不是背景色:android:buttonTint"@color/colorAccent"修改大小和边框颜色:
Stella981 Stella981
3年前
ListActivity中CheckBox的勾选事件处理
这个小例子包含:ListActivity中CheckBox的勾选事件处理,List中Item的单击和长按事件处理,以及在list下方显示一个不随List滚动的Button!(http://static.oschina.net/uploads/space/2013/0125/234312_5jr9_189801.png)当ListActivity中
Stella981 Stella981
3年前
Jquery中prop( )和attr( )的区别和用法
 1.碰到的“坑”<label<inputtype"checkbox"class"checkbox"id"apple"苹果<inputtype"checkbox"class"checkbox"id"banana"香蕉<inputtype"checkbox"clas
Stella981 Stella981
3年前
Flutter入门(五)
\表单classTextFieldDemoextendsStatelessWidget{效果图!(https://oscimg.oschina.net/oscnet/03924702b8cb82283b0d20d37eb8aa3642a.jpg)\CheckBox多选import'pa