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实现 RadioButton做必选校验功能
Jun 15 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 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数组中删除元素的实现代码
2012/06/22 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php教程之phpize使用方法
2014/02/12 PHP
php文件系统处理方法小结
2016/05/23 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
促销活动策划方案
2014/01/12 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
小学中队活动总结
2015/05/11 职场文书
战马观后感
2015/06/08 职场文书
财产分割协议书
2016/03/22 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang