jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例


Posted in jQuery onDecember 18, 2017

废话不多说,直接上代码吧

<!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>

效果截图:

jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

以上这篇jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
jquery获取transform里的值实现方法
Dec 12 #jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 #jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 #jQuery
jquery学习笔记之无new构建详解
Dec 07 #jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 #jQuery
You might like
PHP可变函数的使用详解
2013/06/14 PHP
深入PHP数据加密详解
2013/06/18 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
Python中tell()方法的使用详解
2015/05/24 Python
python中map()与zip()操作方法
2016/02/27 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
python中加背景音乐如何操作
2020/07/19 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
jupyter 添加不同内核的操作
2021/02/06 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
教育专业自荐书范文
2013/12/17 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
党员年终个人总结
2015/02/14 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
数据库之SQL技巧整理案例
2021/07/07 SQL Server