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. 【Oracle】权限

    1. 授予权限: GRANT privilege[, privilege...] TO user [, user| role, PUBLIC...]; ①DBA授予用户系统权限 GRANT creat ...

  2. es6学习 http://es6.ruanyifeng.com/

    基础学习   http://es6.ruanyifeng.com/  够了 1字符串 字符串的遍历器接口 for (let codePoint of 'foo') { console.log(code ...

  3. smarty 3 + codeigniter 2 + hmvc

    参考资料 https://bitbucket.org/wiredesignz/codeigniter-modular-extensions-hmvc/src/fecd39ccdf56?at=defau ...

  4. CImage类的使用介绍！

    链接参考:http://www.cnblogs.com/juncheng/articles/1600730.html CImage是MFC和ATL共享的新类,它能从外部磁盘中调入一个JPEG.GIF. ...

  5. 应用三：Vue之混入(mixin)与全局混入

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 首先介绍一下混入mixin的概念:   官方文档:混入提供了一种非常灵活的方式,来分发 Vu ...

  6. IIS访问php页面问题，报告404错误

    IIS访问php页面出现问题,所有php页面找不到,显示404页面,html页面可以正常访问. 搜索结果: 方案1: 打开WEB服务扩展,把“所有未知ISAPI扩展”设为允许! 方案2: PHP没有完 ...

  7. 【JS】【30】各种正则

    前言: 0,基本规则:有点枯燥,可以参考下 正则表达式 – 教程 | 菜鸟教程 http://www.runoob.com/regexp/regexp-tutorial.html 1,校验手机号 2, ...

  8. WEBGL学习【十二】鼠标操作场景

    <!DOCTYPE HTML> <html lang="en"> <head> <title>Listing 7-3 and 7-4 ...

  9. Project Euler 32 Pandigital products

    题意:找出所有形如 39 × 186 = 7254 这种,由 1 - 9,9个数字构成的等式的和,注意相同的积不计算两次 思路:如下面两种方法 方法一:暴力枚举间断点 /*************** ...

  10. nyoj256-C小加之级数求和

    C小加 之 级数求和 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 最近,C小加 又遇到难题了,正寻求你的帮助. 已知:Sn= 1+1/2+1/3+-+1/n. 显然对 ...