关于复选框input[type=checkbox]
关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框。
自己在项目中,遇到一个全选/全不选的需求,刚开始关注点没在这里,而是结构搭建完成之后,发现默认的input[type=checkbox]的范围有点小,就想着扩大其点击范围。
项目是使用bootstrap搭建,复选框是在表格的第一格内。
理一下当时的思路:
1、使用label标签,包裹住复选框,由于bootstrap对td和th都使用了padding,所以即使使用label标签,也无法扩大到整个格子内;
2、使用position:relative, z-index,将input的层级放到td的层级后面,事实证明并不能实现想象中的调整层级的效果;
3、直接使用th或者td标签作为点击范围,在td上直接绑定点击事件,利用之前介绍的prop属性,为input[type=checkbox]添加选中和取消的效果。但是这个又产生新的问题了,当点击到内部input标签上面的时候,由于冒泡的存在,会导致两次点击事件,如果阻止input点击事件的默认行为,会导致无法实现选中或者取消状态,如果阻止冒泡,又需要额外在复选框上再实现一次点击事件。
总感觉不是很好,又说不上来哪里问题。
今天上午在看《css揭秘》,其中“扩大可点击区域”中有一句话是“伪元素同样可以代表其宿主元素来响应鼠标交互”(148页),并实现了例子,突然想到其实我这个情况跟他是一样一样的。
于是,对td和th实现伪元素:before进行覆盖,结合2的想法,利用伪元素在定位在td的上层,遮住input。
<td class="js-checkbox"><input type="checkbox"></td>
html代码如上。
.js-checkbox{
position: relative;
}
.js-checkbox:before{
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.01);
}
最开始给这个背景色的透明度设为0的,但是偶尔会出现点透的现象,不知道是什么原因,后面就调整了透明度,从视觉上看并没有太大影响,甚至可以将透明度调到更小,这就保证了永远不能点到input元素上,并且整个td的范围都是可点击范围。
关于全选和全不选的js部分,会在后面整理成插件贴出来。
关于复选框input[type=checkbox]的更多相关文章
- 表单复选框input[type="checkbox"]
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- 复选框input:checkbox
复选框 CreateTime--2017年6月5日14:04:55Author:Marydon 五.复选框 (一)语法 <input type="checkbox" /& ...
- js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
- 复选框(checkbox)、单选框(radiobox)的使用
复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...
- 方便实用的jQuery checkbox复选框全选功能
// 主复选框 <input type="checkbox" id="ck" name="ckAll">// 子复选框项 < ...
- jQuery判断复选框checkbox的选中状态
通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...
- radio(单选框)/checkbox(复选框) 美化
由于某种原因,可能需要对单选框(radio)或复选框(checkbox)进行美化,那么直接修改样式是行不通,要实现就需要添加js,以下js依赖于jquery radio.js: function ra ...
- DOM(十)使用DOM设置单选按钮、复选框、下拉菜单
1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...
- html复选框
1.添加复选框 <input type="checkbox" id="yc" name="yc" value="year&q ...
随机推荐
- angular $http 与form表单的select
产品线 产品 版本 代码是联动关系 ng-model 绑定数据 设置默认值 ng-options 填充option ng-change 选项变化时的操作截图如下: html <!DOCTYPE ...
- 曲线救国:IIS7集成模式下如何获取网站的URL
如果我们在Global中的Application_Start事件中访问HttpContext.Current.Request对象,如: protected void Application_Start ...
- 在VFP6中模拟CursorAdapter的功能
这个是我在2002年做的一个VFP程序中实现的方法, 现在看来功能和VFP8,9中的CursorAdapter非常相似, 因为属性设置有许多相同的地方,我甚至怀疑CA就是就是在这样的基础上再包装出来的 ...
- ios原声音频播放AVAudioSession 总结
//音频播放/*英译:record:录音 */ 1 导入头文件#import<AVFoundation/AVFoundation.h>//AVAudioSession是一个单例模式.在IO ...
- 【JavaScript中的正则表达式】
原文地址:http://blog.csdn.net/xh16319/article/details/9987847 1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有 ...
- Javascript数据类型检测
Javascript有5种简单数据类型和一种复杂数据类型 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,R ...
- codeforces Round#381 div2
第一题: 按余数分类,1,2,3分别由哪些基数组成 1->[1][2+3][3+3+3] 2->[1+1][2][3+3] 3->[1+1+1][1+2][3] #include&l ...
- js常见报错之Unexpected token in JSON at position
源头 出现这个报错提示,根本原因只有一个--json解析异常,所以请大家直接去关注自己json的返回数据注意检查其返回内容和内容的格式是否正确,至于本文血案的导火索是因为json注释滴问题. 事发 ...
- iOS第三方Api及常用框架总结
iOS常用框架汇总: SVProgressHUD:产生覆盖层,禁止某种操作 SDWebImage: 专业下载图片框架 AFN:网络数据请求框架 MJExtension,模型对象之间互转 第三方分享第三 ...
- wenbenfenlei
ICTCLAS: 该分词系统的主要思想是先通过CHMM(层叠形马尔可夫模型)进行分词,通过分层,既增加了分词的准确性,又保证了分词的效率.基本思路是:先进行原子切分,然后在此基础上进行N-最短路径粗切 ...