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 appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现穿梭框效果
Jan 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
Python 文件重命名工具代码
2009/07/26 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
21行Python代码实现拼写检查器
2016/01/25 Python
python去掉行尾的换行符方法
2017/01/04 Python
Python变量和字符串详解
2017/04/29 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
Django多个app urls配置代码实例
2020/11/26 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
法雷奥SQA(electric)面试问题
2016/01/23 面试题
公务员群众路线心得体会
2014/11/03 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
房屋质量投诉书
2015/07/02 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang