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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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注销代码(session注销)
2012/05/31 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
node.js实现快速截图
2016/08/27 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
js实现简易计算器功能
2019/10/18 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
js实现烟花特效
2020/03/02 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
英国办公用品商店:Office Outlet
2018/04/04 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
外贸业务员求职信范文
2013/12/12 职场文书
客户接待方案
2014/02/26 职场文书
幼儿园见习报告范文
2014/10/30 职场文书