关于复选框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]的更多相关文章

  1. 表单复选框input[type="checkbox"]

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  2. 复选框input:checkbox

      复选框 CreateTime--2017年6月5日14:04:55Author:Marydon 五.复选框 (一)语法 <input type="checkbox" /& ...

  3. js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

  4. 复选框(checkbox)、单选框(radiobox)的使用

    复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...

  5. 方便实用的jQuery checkbox复选框全选功能

    // 主复选框 <input type="checkbox" id="ck" name="ckAll">// 子复选框项 < ...

  6. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  7. radio(单选框)/checkbox(复选框) 美化

    由于某种原因,可能需要对单选框(radio)或复选框(checkbox)进行美化,那么直接修改样式是行不通,要实现就需要添加js,以下js依赖于jquery radio.js: function ra ...

  8. DOM(十)使用DOM设置单选按钮、复选框、下拉菜单

    1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...

  9. html复选框

    1.添加复选框 <input type="checkbox" id="yc" name="yc" value="year&q ...

随机推荐

  1. angular $http 与form表单的select

    产品线 产品 版本 代码是联动关系 ng-model 绑定数据 设置默认值 ng-options 填充option ng-change 选项变化时的操作截图如下: html <!DOCTYPE ...

  2. 曲线救国:IIS7集成模式下如何获取网站的URL

    如果我们在Global中的Application_Start事件中访问HttpContext.Current.Request对象,如: protected void Application_Start ...

  3. 在VFP6中模拟CursorAdapter的功能

    这个是我在2002年做的一个VFP程序中实现的方法, 现在看来功能和VFP8,9中的CursorAdapter非常相似, 因为属性设置有许多相同的地方,我甚至怀疑CA就是就是在这样的基础上再包装出来的 ...

  4. ios原声音频播放AVAudioSession 总结

    //音频播放/*英译:record:录音 */ 1 导入头文件#import<AVFoundation/AVFoundation.h>//AVAudioSession是一个单例模式.在IO ...

  5. 【JavaScript中的正则表达式】

    原文地址:http://blog.csdn.net/xh16319/article/details/9987847 1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有 ...

  6. Javascript数据类型检测

    Javascript有5种简单数据类型和一种复杂数据类型 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,R ...

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

  8. js常见报错之Unexpected token in JSON at position

    源头   出现这个报错提示,根本原因只有一个--json解析异常,所以请大家直接去关注自己json的返回数据注意检查其返回内容和内容的格式是否正确,至于本文血案的导火索是因为json注释滴问题. 事发 ...

  9. iOS第三方Api及常用框架总结

    iOS常用框架汇总: SVProgressHUD:产生覆盖层,禁止某种操作 SDWebImage: 专业下载图片框架 AFN:网络数据请求框架 MJExtension,模型对象之间互转 第三方分享第三 ...

  10. wenbenfenlei

    ICTCLAS: 该分词系统的主要思想是先通过CHMM(层叠形马尔可夫模型)进行分词,通过分层,既增加了分词的准确性,又保证了分词的效率.基本思路是:先进行原子切分,然后在此基础上进行N-最短路径粗切 ...