jQuery实现点击DIV同时点击CheckBox，并为DIV上背景色

悠悠 2022-07-14 09:46 205阅读 0赞

直接上代码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JqueryTest</title>
        <script src="js/jquery-1.8.3.min.js"></script>
        <script>
    	$(document).ready(function () {
    
    		$('input').click(function(e){
    			e.stopPropagation();
    			var parent = $(this).parent();
    			$(this).is(':checked') ? parent.css('background-color','#CCC') : parent.css('background-color','#FFF');
    		});
    
    		$('div').click(function(){
    			$(this).find(':checkbox').click();
    			if($(this).css('background-color') == 'rgb(255, 255, 255)'){
    				$(this).css('background-color', '#CCC');
    			}else{
    				$(this).css('background-color', '#FFF');
    			}
    		});
    	});
    	</script>
    </head>
    <body>
        <div>
            <input type="checkbox" />A
        </div>
        <div>
            <input type="checkbox" />B
        </div>
        <div>
            <input type="checkbox" />C
        </div>
    </body>
    </html>

效果截图：

![SouthEast][]

![SouthEast 1][]

[SouthEast]: /images/20220714/5ebd504b3fdb4d77ac4f77582fc928c7.png
[SouthEast 1]: /images/20220714/e2e585eff7d842fd96097f7d0b65db26.png

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 js随即数字random实现div点击更换背景色

需求：点击按钮随机给盒子换背景色用到的知识点：Math.random Math.round githu地址 [https://github.com/sandra

待我称王封你为后i/ 2023年06月05日 08:08/ 0 赞/ 21 阅读

相关 php关闭弹出div,jquery,_jquery 点击下一个DIV关闭上一个DIV，jquery - phpStudy

jquery 点击下一个DIV关闭上一个DIV DIV结构是这样的：点击里的 btn 显示 content ，点击 btn 隐藏 content 问题：当前内容

╰+哭是因爲堅強的太久メ/ 2022年11月18日 13:41/ 0 赞/ 148 阅读

相关 js实现点击显示一个div,点击其他任何地方div消失

https://bbs.csdn.net/topics/390853007 https://www.itranslater.com/qa/details/2125411084

港控/mmm°/ 2022年09月16日 14:16/ 0 赞/ 290 阅读

相关 jQuery实现点击DIV同时点击CheckBox，并为DIV上背景色

直接上代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8

悠悠/ 2022年07月14日 09:46/ 0 赞/ 206 阅读

相关【Jquery】jquery点击按钮弹出div层

1、在jquery中，点击一个按钮弹出DIV层对话框的实例。【点击table中“操作”一列中的按钮弹出一个弹出层】。先看看效果： ![20161205121315331]

我不是女神ヾ/ 2022年07月14日 09:19/ 0 赞/ 564 阅读

相关点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏

<input id="btnClick" type="button" value="原生写法" class="btn-green radius" />

一时失言乱红尘/ 2022年05月23日 13:53/ 0 赞/ 311 阅读

相关点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏

<input id="btnClick" type="button" value="原生写法" class="btn-green radius" />

蔚落/ 2022年01月29日 09:35/ 0 赞/ 426 阅读

相关 js 实现简单的点击div改变背景颜色

思路：点击div改变背景颜色，是通过判断点击的次数，达到改变背景颜色，主要运用了数的加，累加。效果：![在这里插入图片描述][20190719150157136.pn

「爱情、让人受尽委屈。」/ 2021年12月04日 02:11/ 0 赞/ 845 阅读

相关 jquery点击div跳转页面

<div onclick="window.open('http://www.baidu.com')">在新窗口跳转至百度</div> <di

一时失言乱红尘/ 2021年09月30日 11:36/ 0 赞/ 622 阅读

相关阻止上层div触发点击事件，并触发下层div的点击事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

拼搏现实的明天。/ 2021年09月23日 13:48/ 0 赞/ 957 阅读