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 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
页面使用密码保护代码
2013/04/10 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
代码详解Vuejs响应式原理
2017/12/20 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python实现的快速排序算法详解
2017/08/01 Python
Python3实现转换Image图片格式
2018/06/21 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python读写csv文件实例代码
2019/07/05 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python 模拟登陆163邮箱
2020/12/15 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
单位租车协议书
2015/01/29 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
Elasticsearch 聚合查询和排序
2022/04/19 Python