checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

 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>

原文地址:https://www.cnblogs.com/jiangjiali1228/p/10970105.html

时间: 2024-10-20 04:21:23

checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中的相关文章

jquery单选框radio绑定click事件实现和是否选中的方法

使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1.<input type="radio" name="testradio" value="jquery获取radio的值" />jquery获取radio的值2.<input type="radio" name=&

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbind('click').click(function(){ //此处填写逻辑代码 }) ------ 因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失 查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法: e.s

针对jquery绑定click事件执行两次,layer弹出框,以及img的map属性应用。

前不久使用jQuery与layer实现一个弹出框,发现在绑定弹出框事件时,事件执行了两次,准确的说是方法同时注册了两次,不分先后执行了两遍,导致弹出框弹出两次.请教同事后,发现原因有可能是jQuery的js与layer的js冲突(具体原因还需要深入了解),通过网络和请教同事,得到了三种处理方法. 方法一:不采用jQuery进行事件的绑定,直接在标签中添加onclick事件. 方法二:采用这种方式$("#item_add_button")[0].onclick = function(){

Jquery实现点击文字后变成文本框且可修改

$(function() { //获取class为caname的元素 $(".caname").click(function() { var td = $(this); var txt = td.text(); var input = $("<input type='text'value='" + txt + "'/>"); td.html(input); input.click(function() { return false;

JavaScript基础 显示/隐藏效果 点击图片,DIV显示,图片更换,点击更换后的图片,DIV隐藏

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

Jquery实现点击文字后变成文本框,修改发送后台保存

本文实现以下几个功能: 1.点击文字变为文本框 ,并选中文字2.对文本框内容进行修改3.点击文本框以外的地方文本框再次变为修改后的文字,如果是删除文字,显示默认提示文字4. 同步更新SQL数据库内容 首先是HTML模板部分: 1 <{if !empty($img_list)}> 2 <{foreach $img_list as $kk=>$vv}> 3 <div class="item-box radius3"> 4 <a href=&q

使用Jquery实现点击文字后变成文本框且可修改

1 $(function() { 2 //获取class为caname的元素 3 $(".caname").click(function() { 4 var td = $(this); 5 var txt = td.text(); 6 var input = $("<input type='text'value='" + txt + "'/>"); 7 td.html(input); 8 input.click(function()

for for in 给已有的li绑定click事件生成新的li也有click事件

想要给已有的li元素绑定一个click事件,点击生成新的li元素,并且新的li元素也要有click事件 //不能用for循环给每个li绑定click事件 因为这样的话 后面新生成的li就没有click事件 //即使用下面的获取dom元素方法 具有实时性 也不能给新生成的li绑定clcik事件   这两个方法是 实时的 HTMLCollection 不能直接forEach循环let ali1 = oul.getElementsByClassName('li') let ali2 = oul.get

关于IOS浏览器:document,body的click事件触发规则

今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是讲原理,这里写个简单的代码,大家可以复制到自己页面中去实验: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi