当前位置: 首页 > 编程笔记 >

jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

赵俊晤
2023-03-14
本文向大家介绍jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例,包括了jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例的使用技巧和注意事项,需要的朋友参考一下

废话不多说,直接上代码吧

<!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上背景色的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android实现为ListView同时设置点击时的背景和点击松手之后的背景,包括了Android实现为ListView同时设置点击时的背景和点击松手之后的背景的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Android实现为ListView同时设置点击时的背景和点击松手之后的背景。分享给大家供大家参考。具体分析如下: 这里要达到的效果是, (1)点击ListView的it

  • 本文向大家介绍js实现点击切换checkbox背景图片的简单实例,包括了js实现点击切换checkbox背景图片的简单实例的使用技巧和注意事项,需要的朋友参考一下 在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现。如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景为蓝色表示勾选状态 。 HTML源码

  • 本文向大家介绍JavaScript实现点击图片换背景,包括了JavaScript实现点击图片换背景的使用技巧和注意事项,需要的朋友参考一下 JS制作网页–点击图片换背景,供大家参考,具体内容如下 网页中有四个图片,点击不同的图片,更换相对应的背景。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍JQuery点击行tr实现checkBox选中的简单实例,包括了JQuery点击行tr实现checkBox选中的简单实例的使用技巧和注意事项,需要的朋友参考一下 以上这篇JQuery点击行tr实现checkBox选中的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍AngularJs点击状态值改变背景色的实例,包括了AngularJs点击状态值改变背景色的实例的使用技巧和注意事项,需要的朋友参考一下 实例如下: 以上这篇AngularJs点击状态值改变背景色的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍javascript实现鼠标点击页面 移动DIV,包括了javascript实现鼠标点击页面 移动DIV的使用技巧和注意事项,需要的朋友参考一下 一、原理分析: 1.怎么移动? 要移动DIV到指到的坐标点(X,Y),其实质,就是同时改变DIV的DIV.style.top 和 DIV.style.left 这两个值; 2.如何看到移动? 因为要有移动效果,而不是突然间就将某个DIV的T