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. Linux目录结构(二)

    Linux文件系统结的结构是树形结构,其入口从/开始,了解Linux文件系统的结构,对于我们需要掌握的基础知识点之一. 2.文件系统的组织结构简说: 当您使用Linux的时候,如果您通过ls -la ...

  2. art-template简单使用

    art-template是一款较通用的前端模板引擎. 简单的使用方法如下: 具备3个要素 1)模板 <script type="text/template" id=" ...

  3. 8) 十分钟学会android--Activity的生命周期之停止与重启

    恰当的停止与重启我们的activity是很重要的,在activity生命周期中,他们能确保用户感知到程序的存在并不会丢失他们的进度.在下面一些关键的场景中会涉及到停止与重启: 用户打开最近使用app的 ...

  4. WPF开发“Program '*' does not contain a static 'Main' method suitable for an entry point”错误

    WPF项目编译时出现“Program '*' does not contain a static 'Main' method suitable for an entry point”错误,   解决方 ...

  5. sql多表关联

    inner join(等值连接) 只返回两个表中联结字段相等的行 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有 ...

  6. ReactiveX Operators

    This documentation groups information about the various operators and examples of their usage into t ...

  7. 【转】Oracle基础结构认知—初识oracle 礼记八目 2017-12-12 21:19:30

    Oracle服务器(oracle server)由实例和数据库组成.其中,实例就是所谓的关系型数据库管理系统(Relational Database Management System,RDBMS), ...

  8. word2016如何英汉互译

    1.如果是一篇英文文档且是pdf格式,可以用word2016打开直接转化成了word,就算不是会员也可以的,在此附上16版的光盘安装包,可以百度自行下载 (链接:https://pan.baidu.c ...

  9. Centos7 单节点安装 FastDFS + FastDHT服务

    Centos7 单节点安装 FastDFS + FastDHT服务 1.安装gcc(编译时需要) FastDFS是C语言开发,安装FastDFS需要先将官网下载的源码进行编译,编译依赖gcc环境,如果 ...

  10. PHP面向对象(二)

    7 多态 多态: 多种形态 多态分俩种: 方法重写和方法加载 7.1 方法重写 子类重写了父类的同名的方法 <?php class Person{ public function show(){ ...