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. Linq怎么支持Monad

    在上一篇创建了我们的第一个Monad, Identity<T>. 我们确定了类型要变成Monad, 它必须有一个type constructor(Identity<T>), 和 ...

  2. 如何在Linux下添加自己的驱动

    在此Linux驱动开发采用网络的方式,介绍两种驱动开发的方法:一.驱动编译到内核 1.先选择一个放置驱动代码的位置,例:drivers/char/xxx.c 2.在drivers/char/Kconf ...

  3. 经典C/S服务器模型之守护进程

    linux编程-守护进程编写 守护进程(Daemon)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.守护进程是一种很有用的进程. Linux的大多数服务 ...

  4. <script runat=server>与<%%>，<%=%>与<%response.write%>

    我想问一下:在语句<script runat="server"> </script>中编写后台代码和在后台.cs文件中编写后台代码有什么不同,执行效率会不会 ...

  5. 深入jar包：从jar包中读取资源文件

    我们常常在代码中读取一些资源文件(比如图片,音乐,文本等等).在单独运行的时候这些简单的处理当然不会有问题.但是,如果我们把代码打成一个jar包以后,即使将资源文件一并打包,这些东西也找不出来了.看看 ...

  6. Chernobyl’ Eagle on a Roof(鹰蛋坚固度)

    链接 Chernobyl’ Eagle on a Roof 题意 引用论文题意:有一堆共 M 个鹰蛋,一位教授想研究这些鹰蛋的坚硬度 E.他是通过不断从一幢 N 层的楼上向下扔鹰蛋来确定 E 的.当鹰 ...

  7. jQuery中Ajax的几种写法

    1.   $.post(url,params,callback); 采用post方式提交,中文参数无需转码,在callback中如果要获取json字符串,还需转换一下. 2.  $.getJSON(u ...

  8. vc++如何创建程序-函数的重载

    重载构成的条件:函数的参数类型,参数个数不同,才能构成函数的重载 函数重载分为两种情况: 1 .(1)void output(); (2)int output(); 2 .(1)void output ...

  9. JS 封装一个显示时间的函数

    s(); function s (){ var mydate=new Date(); var y = mydate.getFullYear(); var m = mydate.getMonth(); ...

  10. day22 包，相对/绝对路径

    目录 包 包被导入时发生的三件事 为什么要有包 相对路径 绝对路径 包 包是一个文件夹,也是一个模块,只是为了区分单个文件的模块,称之为包.因为单纯的文件夹无法作为模块,文件夹内的__init__.p ...