欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-16 16:45:34
废话不多说,直接上代码吧

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

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