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