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. C-C语言概述

    1.数据+算法=程序. 2.C语言程序是由一个或多个函数组成的,函数是由语句组成的,语句是由关键字,标识符,运算符,数据组成的:语句可分为:声明语句,赋值语句,控制语句,函数语句,空语句. 3.#in ...

  2. Codeforces Round #446

    Greed #include<stdio.h> #include<string.h> #include<stdlib.h> #include<vector&g ...

  3. 更换WordPress编辑器为TinyMCE Advanced

    WordPress自带的编辑器功能很少,连更换字体样式大小都不行,没关系WordPress的插件中心插件非常多 在插件中心搜索TinyMCE Advanced 安装启用 还没完 点击设置 里面有丰富的 ...

  4. Android Studio ( Linux) 创建模拟器报错

    Linux下Android studio创建模拟器最后一步报错 报错:An error occurred while creating the AVD. See idea.log for detail ...

  5. Python快速定位工作目录

    原文链接:http://www.cnblogs.com/wdong/archive/2010/08/19/1802951.html 常年奋斗在编码一线的同学,应该都深有体会,工作久了,很多项目文件.技 ...

  6. MVC 先后顺序

    @foreach (var item in Model) { if (ViewBag.GetModel.ParentID == item.DictID) { <option value=&quo ...

  7. CorelDRAW 2019新品发布，行业大咖就差你了

    近日,由苏州思杰马克丁软件公司独家代理的CorelDRAW 2019将在苏州开启一场设计上的饕餮盛宴,您报名了么? 不管您是专业的设计师还是热爱设计的狂热粉丝,都将有机会参与到我们的活动中,为了这场盛 ...

  8. 优动漫PAINT（clip studio paint）怎么画一幅水墨竹子图

    今天小编分享使用优动漫PAINT绘制一个水墨竹子教程,绘画的过程中我只用到了两个笔刷,即钢笔模式下的“美术字”和“效果线专用”,并且全程鼠标绘制哦,所以生疏的笔触效果大家见谅,没有数位板的小伙伴不妨试 ...

  9. setTimeout（）传带有参数的函数

    w3cshool里的解释:setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,语法:setTimeout(code,millisec). 也就是说,第一个参数可以是字符串形式的Ja ...

  10. nginx的headers_more模块的使用

    nginx的headers_more模块用于 添加.修改或清除 请求/响应头,该模块不是nginx自带的,默认不包含该模块,需要另外安装.幸运的是openresty默认包含了该模块,可以直接使用. 该 ...