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 Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery插件实现图片轮播效果
Oct 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 接口类与抽象类的实际作用
2009/11/26 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
srcElement表格样式
2006/09/03 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
javascript解析json实例详解
2014/11/05 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python实现画圆功能
2018/01/25 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python内置函数locals和globals对比
2020/04/28 Python
python属于软件吗
2020/06/18 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Python装饰器结合递归原理解析
2020/07/02 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
后勤主管岗位职责
2014/03/01 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
网络研修心得体会
2016/01/08 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server