jquery實現(xiàn)子類全選中,則父類自動選中

先MARK一個，等會上代碼。。

崇陽網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司于2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

運行效果：

完整HTML代碼：

!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""

html?xmlns=;

head

meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/

titleDocument/title

script?src=""/script

script?type="text/javascript"?

//全部選擇

$(function(){

$("ul.categories?input").click(function(){

var?children?=?$(this).next();

var?isChecked?=?$(this).prop("checked");

if(children){

if(isChecked){

children.find("input").prop("checked","checked");

}else{

children.find("input").removeProp("checked");

}

}

//同級分類當(dāng)前選中的個數(shù)

var?checkedCount?=?$(this).parent().parent().find("li?input:checked").length;

//同級分類當(dāng)總的個數(shù)

var?count?=?$(this).parent().parent().find("li?input").length;

if(checkedCount?==?count){

$(this).parent().parent().parent().find("input").prop("checked","checked");

}else{

$(this).parent().parent().parent().find("input").removeProp("checked");

}

});

});

/script

/head

body

ul?class="categories"

liinput?type="checkbox"?id="lvl2"/數(shù)碼電子

ul

liinput?type="checkbox"?id="lvl3"/手機/li

liinput?type="checkbox"?id="lvl3"/電腦/li

liinput?type="checkbox"?id="lvl3"/U盤/li

liinput?type="checkbox"?id="lvl3"/相機/li

/ul

/li

liinput?type="checkbox"?id="lvl2"/服裝

ul

liinput?type="checkbox"?id="lvl3"/毛衣/li

liinput?type="checkbox"?id="lvl3"/T恤/li

liinput?type="checkbox"?id="lvl3"/羽絨服/li

liinput?type="checkbox"?id="lvl3"/秋褲/li

/ul

/li

liinput?type="checkbox"?id="lvl2"/飾品

ul

liinput?type="checkbox"?id="lvl3"/純金/li

liinput?type="checkbox"?id="lvl3"/純銀/li

/ul

/li

liinput?type="checkbox"?id="lvl2"/家電

ul

liinput?type="checkbox"?id="lvl3"/電飯煲/li

liinput?type="checkbox"?id="lvl3"/電磁爐/li

liinput?type="checkbox"?id="lvl3"/吸塵器/li

liinput?type="checkbox"?id="lvl3"/液化氣灶/li

/ul

/li

/ul

/body

/html

在Jquery里，怎樣得到其父下對應(yīng)的子類？代碼如下

$(function(){

$(".listCont1").click(function(event){

//由于冒泡事件，要先判斷是哪個響應(yīng)的click

if($(this).attr('class').indexOf('clear')-1)//觸發(fā)的是父div

{

$(this).find('input').prop("checked");

return?false;//結(jié)束冒泡

}

else?if($(this).is('input'))//觸發(fā)的是input

{

$(this).prop("checked");

return?false;//結(jié)束冒泡

}

else????//觸發(fā)的是子控件

{

$(this).parent().find('input').prop("checked");

return?false;//結(jié)束冒泡

}

});

});

注意，prop需要JQuery1.6以上版本。

jquery選擇器 如果選中多個名字一樣的DIV里面的同名子類

不知道你說的選中是如何操作的，給你個例子。

var obj=$(this);//比如說這是你獲取選中的div class="a1"的對象。

獲得a1對象下邊的第一個div class="a2", $(obj).children(":first")

jquery 如何遍歷子類?

$(".n").children().echo(function(){

if($(this).attr("class")=="a2")?$(this).attr("class","a9");

})

只是不懂為何一定要遍歷找出a2 ,為何不直接更改。例如：

$(".n.a2").attr("class","a9");

jquery如何獲取第一個或最后一個子元素？

通過children

children("input:first-child")

$(this).children("input:first-child").val();

$(this).children("input:last-child").val();

通過選擇器，$(".itemsinput:first")

1. 通過位置選擇的操作：

:first：默認情況下是相對整個頁面來說的第一個，如：li:first表示整個頁面的第一個li元素，而ul li:first表示整個頁面的第一個li元素，并且是在ul下的子元素；

:first- child：為每個父元素匹配第一個子元素，如li:first-child返回每個ul的第一個li元素。可以這樣理解，頁面中的元素有相同的父元素 的，并且里面又包含li元素的，那么就取第一個li元素，每個子類集合都要進行判斷，直到找出所有符合要求的li元素；

:only- child：返回所有沒有兄弟節(jié)點的元素，注意，文本元素不是，也就是說類似這樣的divhelloa href=""jquery/a/div，對于這段會選出a元素；對 于$(”label:only-child“)會選出是label元素，同時它是它父類唯一的子元素的label元素；

:nth-child(n)：返回第n個子節(jié)點，n從1開始，如果n取0，那么就會選擇所有的元素。如：[*]li:nth-child(2)返回li元素，并且該元素是其父元素的第二個子元素；

:nth-child(even|odd)：返回偶數(shù)或奇數(shù)的子節(jié)點；

:nth-child(An+B)：返回滿足表達式An+B的所有子節(jié)點，比如3n+1返回所處位置為父節(jié)點子元素的是3的倍數(shù)加1的那個子元素；

:even：頁面范圍內(nèi)的處于偶數(shù)位置的元素，如：li:even返回全部偶數(shù)li元素；

:odd：頁面范圍內(nèi)的處于奇數(shù)位置的元素；

:eq(n)：第n個匹配的元素(n從0開始)，如：li:eq(3)返回整個頁面的第四個li元素，ul li:eq(1)返回頁面中第一個ul元素下的第二個li元素，注意：只匹配一次就返回了；

:gt(n)：第n個匹配元素(不包括)之后的元素(n從0開始)，如：ul:gt(2)返回從第3個ul開始的所有ul元素(含第三個)；

:lt(n)：第n個匹配元素(不包括)之前的元素(n從0開始)，如：ul:lt(2)返回從第0個和第1個ul元素；

2. 利用css選擇器進行選擇：

元素標(biāo)簽名：比如說$(”a“)會選出所有鏈接元素；

#id：通過元素id進行選擇，比如說$("#form1")會選擇id為form1的元素；

.class：通過元素的CSS類來選擇，比如說$(".boldstyle")會選擇CSS為boldstyle類的元素；

標(biāo)簽 名#id.class：通過某類元素的id屬性和class屬性來選擇，如：$(a#blog.boldStyle)會選擇id為blog并且CSS類型 為.boldStyle類型的鏈接元素(a id='blog' class='.boldStyle')；

父標(biāo)簽名 子標(biāo)簽名.class：通過選擇父標(biāo)簽下的某種CSS類型的子元素，如：$(p a.redStyle)會選擇p段落元素中的鏈接子元素a，且其css類型為.redStyle；

3. 通過子選擇器，容器選擇器和屬性選擇器進行選擇：

*：匹配所有的元素，比如說:$(*)會把頁面中的所有元素都返回；

E：匹配標(biāo)簽名為E的所有元素，如$("a")返回所有鏈接元素；

E F：匹配父元素E下的標(biāo)簽名為F的所有子元素（F可以為E的子類的子類，甚至更遠）；

EF：匹配父元素E下的所有標(biāo)簽名為F的直接子元素；

E+F：匹配所有標(biāo)簽名為F的元素，并且有E類型的兄弟節(jié)點在該F元素之前（E,F緊挨著）；

E~F：匹配前面是任何兄弟節(jié)點E的所有元素F(E,F不必緊挨著);

E:has(F)：匹配標(biāo)簽名為E，至少有一個標(biāo)簽名為F的后代節(jié)點的所有元素E；

E.C：匹配帶有類名C的所有元素E。.C等效于*.C；

E#I：匹配id為I的所有元素E，#I等效于*#I；

E[A]：匹配帶有屬性A的所有元素E；

E[A=V]：匹配所有屬性A的值為V的元素E；

E[A^=V]：匹配所有元素E，且A的屬性值是V開頭的；

E[A$=V]：匹配所有元素E，且A的屬性值是V結(jié)尾的；

E[A*=V]：匹配所有元素E，且A的屬性值中包含有V；

4.利用jQuery自定義的選擇器進行選擇：

:button：選擇任何按鈕類型的元素，包括input[type=submit]等等；

:checkbox：選擇復(fù)選框元素；

:file：選擇所有文件類型元素，即input[type=file]；

:image：選擇表單中的圖像元素，即input[type=image]，注意此處和前面根據(jù)標(biāo)簽名img選擇圖像有點不同哈；

:input：選擇表單元素，如input,select,textarea,button等；

:radio：選擇單選按鈕元素；

:reset：選擇復(fù)位按鈕元素，如input[type=reset]，button[type=reset]；

:submit：選擇提交按鈕元素；

:text：選擇文本字段元素，即input[type=text]；

:animated：選擇當(dāng)前處于動態(tài)控制下的元素；

:contains(hello)：選擇包含文本hello的元素；

:header：選擇標(biāo)題元素，如h1；

:parent：選擇擁有后代節(jié)點(包括文本)的元素，而排除空元素；

:selected：選擇已選中的選項元素；

:visible：選擇可見元素；

網(wǎng)站標(biāo)題：jquery子類,淺談jquery的應(yīng)用
當(dāng)前URL：http://chinadenli.net/article7/dssphoj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、品牌網(wǎng)站制作、服務(wù)器托管、App開發(fā)、品牌網(wǎng)站建設(shè)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)