快捷導(dǎo)航

jQuery實現(xiàn)點擊DIV同時點擊CheckBox,并為DIV上背景色的實例

更新時間：2017年12月18日 15:24:58 作者：Master_Pan

下面小編就為大家分享一篇jQuery實現(xiàn)點擊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實現(xiàn)點擊DIV同時點擊CheckBox,并為DIV上背景色的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery實現(xiàn)拖動效果
這篇文章主要為大家詳細介紹了jquery實現(xiàn)拖動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
JQuery表單驗證插件EasyValidator用法分析
這篇文章主要介紹了JQuery表單驗證插件EasyValidator用法,以實例形式系統(tǒng)分析了EasyValidator的功能特性及具體用法,是非常實用的jQuery插件,需要的朋友可以參考下
2014-11-11
jquery tabs的實現(xiàn)代碼
晚上有插件可以實現(xiàn)"jquery tab"，但有點復(fù)雜了，我想寫個最簡單的，來實現(xiàn)"jquery tab"。而事實上確實很簡練
2009-05-05
讀jQuery之五（取DOM元素）
使用過Prototype.js的同學(xué)知道$(xx)調(diào)用后返回的是HTMLElement或其集合。
2011-06-06
jQuery獲取Radio,CheckBox選擇的Value值(示例代碼)
這篇文章主要是對jQuery獲取Radio,CheckBox選擇的Value值進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jQuery客戶端分頁實例代碼
這篇文章主要介紹了jQuery客戶端分頁實例代碼，有需要的朋友可以參考一下
2013-11-11
firefox下jquery ajax返回object XMLDocument處理方法
使用jquery ajax處理struts2 返回json類型的時候，ajax執(zhí)行成功返回結(jié)果為object XMLDocument，解決方法如下
2014-01-01
基于jquery的仿百度的鼠標移入圖片抖動效果
在鼠標放到圖片上，圖片會有個上下抖動的特效。很喜歡這種感覺。在于是摸索了一下，下面是一些步驟。
2010-09-09
jQuery實現(xiàn)全選、反選和不選功能
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)全選、反選和不選功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
JQuery的$命名沖突詳細解析
在Jquery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來替換，如$('#msg')等同于JQuery('#msg')的寫法。然而，當(dāng)我們引入多個js庫后，在另外一個js庫中也定義了$符號的話，那么我們在使用$符號時就發(fā)生了沖突
2013-12-12