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

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

下面小編就為大家分享一篇jQuery實(shí)現(xiàn)點(diǎn)擊DIV同時(shí)點(diǎn)擊CheckBox,并為DIV上背景色的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

廢話不多說(shuō)，直接上代碼吧

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

您可能感興趣的文章:

相關(guān)文章

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