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.load()和Jsp的include的区别
Apr 12 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
javascript的函数作用域
2014/11/12 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python记录程序运行时间的三种方法
2017/07/14 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python如何重新加载模块
2020/07/29 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
营销计划书范文
2015/01/17 职场文书
花木兰观后感
2015/06/10 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python