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 tip提示插件(实例分享)
Apr 28 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jquery自定义组件实例详解
Dec 31 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
smarty实例教程
2006/11/19 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Python实现的tab文件操作类分享
2014/11/20 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python虚拟环境迁移方法
2019/01/03 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
毕业生工作求职信
2014/06/30 职场文书
国防教育标语
2014/10/08 职场文书
购房委托书
2014/10/15 职场文书
平安建设汇报材料
2014/12/29 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
活着观后感
2015/06/03 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL