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. css3动画简单案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 机器学习PAI为你自动写歌词，妈妈再也不用担心我的freestyle了（提供数据、代码）

    背景 最近互联网上出现一个热词就是“freestyle”,源于一个比拼rap的综艺节目.在节目中需要大量考验选手的freestyle能力,freestyle指的是rapper即兴的根据一段主题讲一串r ...

  3. C#多线程（Thread）开发基础

    除非另有说明,否则所有的例子都假定以下命名空间被引用: using System; using System.Threading; 1      基本概念 在描述多线程之前,首先需要明确一些基本概念. ...

  4. SQL的类型转换

    说到SQL类型转换,我们知道SQL是一个弱类型语言,所以可以做隐式的强制类型转换,下面记录一下这几天遇到的类型转换问题. 1.在SQL中,字符串类型与数字之间转换是不需要强制类型转换符的,如果字符串是 ...

  5. LSTM比较RNN

    LSTM只能避免RNN的梯度消失(gradient vanishing),但是不能对抗梯度爆炸问题(Exploding Gradient). 梯度膨胀(gradient explosion)不是个严重 ...

  6. kali 安装openvas

    因为Kali Linux上没有默认安装OpenVas,因此只好自己摸索着安装了一遍. 如果没有设置过源(/etc/apt/sources.list),设置如下: deb http://http.kal ...

  7. HDU1867 - A + B for you again

    Generally speaking, there are a lot of problems about strings processing. Now you encounter another ...

  8. nyoj2-吝啬的国度

    吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市,他有 ...

  9. maven构建本地jar包到本地仓库

    maven命令: mvn:install:install-file -DgroupId=com.oracle -DartifactId=ojdbc6 -Dversion=1.0 -Dpackaging ...

  10. Hadoop(2)_机器信息分布表

    1.分布式环境搭建 采用4台安装Linux环境的机器来构建一个小规模的分布式集群. 图1 集群的架构 其中有一台机器是Master节点,即名称节点,另外三台是Slaver节点,即数据节点.这四台机器彼 ...