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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 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
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
jQuery Tools tab使用介绍
2012/07/14 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python中如何导入类示例详解
2019/04/17 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
什么是反射
2012/03/17 面试题
护士思想汇报
2014/01/12 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
党员四风剖析材料
2014/08/27 职场文书
会计工作检讨书
2015/02/19 职场文书
英文投诉信格式
2015/07/03 职场文书
《正比例》教学反思
2016/02/23 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server