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实现前端分页功能
Mar 23 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 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/01/05 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
php微信公众号开发之简答题
2018/10/20 PHP
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
简单介绍Python中的struct模块
2015/04/28 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
django中静态文件配置static的方法
2018/05/20 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python 实现屏幕录制示例
2019/12/23 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
单位委托书怎么写
2014/08/02 职场文书
办公室主任岗位职责
2015/01/31 职场文书
表扬信范文
2015/05/04 职场文书
二年级数学教学反思
2016/02/16 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android