checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div
{
display: inline-block;
width: 100px;
margin-left: 10px;
}
</style>
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
//注册checkbox的click事件
$(document).on('click', ':checkbox', function (e) {
//停止事件冒泡,当点击的是checkbox时,就不执行父div的click
e.stopPropagation();
var oCk = $(this), parentDiv = oCk.parent();
oCk.prop('checked') ? parentDiv.css('background-color', 'blue') : parentDiv.css('background-color', '');
});
//注册div的click事件,点击div时动态执行checkbox的click事件
$(document).on('click', 'div', function () {
$(this).find(':checkbox').click();
})
</script>
</head>
<body>
<div>
<input type="checkbox" />A
</div>
<div>
<input type="checkbox" />B
</div>
<div>
<input type="checkbox" />C
</div>
</body>
</html>

checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中的更多相关文章

  1. jquery单选框radio绑定click事件实现和是否选中的方法

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...

  2. jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...

  3. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  4. html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

    先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...

  5. jquery实现点击文字后变成文本框且可修改

    $(function() { //获取class为caname的元素 $(".caname").click(function() { var td = $(this); var t ...

  6. jQuery单选框radio绑定click事件

    <div class="con_head"> <label><input type="radio" name="ask& ...

  7. 解决jquery绑定click事件出现点击一次执行两次问题

    问题定位:通过浏览器F12定位到点击一次出现两次调用. 问题复现: $("#mail_span").on("click",function(){        ...

  8. for for in 给已有的li绑定click事件生成新的li也有click事件

    想要给已有的li元素绑定一个click事件,点击生成新的li元素,并且新的li元素也要有click事件 //不能用for循环给每个li绑定click事件 因为这样的话 后面新生成的li就没有click ...

  9. 关于IOS浏览器：document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

随机推荐

  1. Memcached 与 Redis 的关键性能指标比较

    性能对比: Redis 只使用单核,而 Memcached 可以使用多核,所以平均每一个核上 Redis在存储小数据时比 Memcached 性 能更高. 而在 100k 以上的数据中,Memcach ...

  2. 微信小程序video组件出现无法播放或卡顿

    微信小程序使用video组件播放视频的时候,会出现卡顿或者无法播放的问题,加一个custom-cache=”true“即可解决,这个属性文档上没有,是从小程序开发社区中get到的.

  3. JavaScript的面向对象

    JavaScript的对象 对象是JavaScript的一种数据类型.对象可以看成是属性的无序集合,每个属性都是一个键值对,属性名是字符串,因此可以把对象看成是从字符串到值的映射.这种数据结构在其他语 ...

  4. 利用Axis2默认口令安全漏洞入侵WebService网站

    近期,在黑吧安全网上关注了几则利用Axis2默认口令进行渗透测试的案例,大家的渗透思路基本一致,利用的技术工具也大致相同,我在总结这几则案例的基础之上进行了技术思路的拓展.黑吧安全网Axis2默认口令 ...

  5. (转载)TNSPING命令

    Oracle Net 工具(命令)tnsping,是一个OSI会话层的工具,它用来: 1)验证名字解析(name resolution,当然是oracle自己的网络服务名) 2)远程的listener ...

  6. oracle 编译包的时候,一直提示正在编译

    select b.sid,b.serial#,b.machine,b.terminal,b.program,b.process,b.status from v$lock a , v$session b ...

  7. Solid Angle of A Cubemap Texel - 计算Cubemap的一个像素对应的立体角的大小

    参考[http://www.rorydriscoll.com/2012/01/15/cubemap-texel-solid-angle/] 计算diffuse irradiance map或者求解sh ...

  8. 应用七：Vue之适配test环境变量（2.0版）

    在我们使用vue-cli创建的项目中,默认只有开发development和生产production两种环境变量:但在实际的项目开发过程中往往都会有测试环境,下面就来说一下如何适配测试环境test的环境 ...

  9. 洛谷P3195 [HNOI2008]玩具装箱TOY 斜率优化

    Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 100000 ...

  10. 安装`lrzsz`包及其报错解决办法

    rz命令的安装包名是lrzsz. 安装lrzsz包时报错Failed to mount cd:///?devices=/dev/sr1,/dev/sr0 on /var/adm/mount/AP_0x ...