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去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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
Protoss兵种介绍
2020/03/14 星际争霸
php intval函数用法总结
2019/04/14 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
js实现登录拖拽窗口
2020/02/10 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
详解Python 切片语法
2019/06/10 Python
python requests指定出口ip的例子
2019/07/25 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Python 绘制可视化折线图
2020/07/22 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
四好少年事迹材料
2014/01/12 职场文书
原材料检验岗位职责
2014/03/15 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
医生辞职信范文
2015/03/02 职场文书
总账会计岗位职责
2015/04/02 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
Python进程池与进程锁之语法学习
2022/04/11 Python