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使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python3生成手写体数字方法
2018/01/30 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
PyQt5实现简易计算器
2020/05/30 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
Python如何获取文件指定行的内容
2020/05/27 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
前台文员岗位职责
2013/12/28 职场文书
交通事故调解协议书
2014/04/16 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
单位接收函范文
2015/01/30 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
利用Redis实现点赞功能的示例代码
2022/06/28 Redis