jQuery checkbox全選/取消全選實(shí)現(xiàn)代碼
更新時(shí)間：2009年11月14日 00:30:58 作者：
用JavaScript使頁面上的一組checkbox全選/取消全選，邏輯很簡單，實(shí)現(xiàn)代碼也沒有太難的語法。但使用jQuery實(shí)現(xiàn)則更簡單，代碼也很簡潔，精辟！
jQuery版本：1.3.2
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
<input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
<input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
<input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
<input type="checkbox" name="chk_all" id="chk_all" />全選/取消全選
<script type="text/javascript">
$("#chk_all").click(function(){
$("input[name='chk_list']").attr("checked",$(this).attr("checked"));
});
</script>
</body>
</html>
jQuery.attr 獲取/設(shè)置對(duì)象的屬性值,如：
$("input[name='chk_list']").attr("checked"); //讀取所有name為'chk_list'對(duì)象的狀態(tài)（是否選中）
$("input[name='chk_list']").attr("checked",true); //設(shè)置所有name為'chk_list'對(duì)象的checked為true
再如：
$("#img_1").attr("src","test.jpg"); //設(shè)置ID為img_1的<img>src的值為'test.jpg'
$("#img_1").attr("src"); //讀取ID為img_1的<img>src值
下面的代碼是獲取上面實(shí)例中選中的checkbox的value值:
<script type="text/javascript">
//獲取到所有name為'chk_list'并選中的checkbox(集合)
var arrChk=$("input[name='chk_list][checked]");
//遍歷得到每個(gè)checkbox的value值
for (var i=0;i<arrChk.length;i++)
{
alert(arrChk[i].value);
}
</script>
哪位高手能把上面遍歷的過程用$.each()寫出來，不勝感激。
復(fù)制代碼 代碼如下:
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
<input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
<input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
<input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
<input type="checkbox" name="chk_all" id="chk_all" />全選/取消全選
<script type="text/javascript">
$("#chk_all").click(function(){
$("input[name='chk_list']").attr("checked",$(this).attr("checked"));
});
</script>
</body>
</html>
jQuery.attr 獲取/設(shè)置對(duì)象的屬性值,如：
復(fù)制代碼 代碼如下:
$("input[name='chk_list']").attr("checked"); //讀取所有name為'chk_list'對(duì)象的狀態(tài)（是否選中）
$("input[name='chk_list']").attr("checked",true); //設(shè)置所有name為'chk_list'對(duì)象的checked為true
再如：
復(fù)制代碼 代碼如下:
$("#img_1").attr("src","test.jpg"); //設(shè)置ID為img_1的<img>src的值為'test.jpg'
$("#img_1").attr("src"); //讀取ID為img_1的<img>src值
下面的代碼是獲取上面實(shí)例中選中的checkbox的value值:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//獲取到所有name為'chk_list'并選中的checkbox(集合)
var arrChk=$("input[name='chk_list][checked]");
//遍歷得到每個(gè)checkbox的value值
for (var i=0;i<arrChk.length;i++)
{
alert(arrChk[i].value);
}
</script>
哪位高手能把上面遍歷的過程用$.each()寫出來，不勝感激。
您可能感興趣的文章:
- 多個(gè)jquery.datatable共存,checkbox全選異常的快速解決方法
- jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
- jquery復(fù)選框CHECKBOX全選、反選
- JQUERY CHECKBOX全選,取消全選,反選方法三
- jquery中checkbox全選失效的解決方法
- jquery 實(shí)現(xiàn)checkbox全選，反選，全不選等功能代碼(奇數(shù))
- jquery數(shù)組之存放checkbox全選值示例代碼
- Jquery CheckBox全選方法代碼附j(luò)s checkbox全選反選代碼
- jquery checkbox全選反選效果代碼
- jQuery實(shí)現(xiàn)CheckBox全選、全不選功能
- jQuery實(shí)現(xiàn)table表格checkbox全選的方法分析
相關(guān)文章
jQuery學(xué)習(xí)筆記之 Ajax操作篇（一） - 數(shù)據(jù)加載
Ajax 通俗來講即不需要刷新頁面即可從服務(wù)器或客戶端上加載數(shù)據(jù)，當(dāng)然這些數(shù)據(jù)的格式是多種多樣的。2014-06-06
jQuery實(shí)現(xiàn)的多張圖無縫滾動(dòng)效果【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的多張圖無縫滾動(dòng)效果,可實(shí)現(xiàn)自定義向左或向右滾動(dòng)的功能,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09
大家在逛淘寶的時(shí)候，把鼠標(biāo)放在寶貝上就會(huì)放大，奇怪這種效果怎么實(shí)現(xiàn)的，下面小編就給大家分享基于jquery實(shí)現(xiàn)放大鏡效果，有需要的朋友可以參考下2015-08-08
JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行
這篇文章主要介紹了JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動(dòng)執(zhí)行，可以應(yīng)用于很多場景，需要的朋友可以參考下2014-09-09
這篇文章主要講述了一個(gè)JQuery入門基礎(chǔ)小實(shí)例，實(shí)現(xiàn)的過程效果都很簡單，特別適合初學(xué)者來學(xué)習(xí)，感興趣的小伙伴們可以參考一下2015-09-09
這篇文章主要介紹了jquery form 加載數(shù)據(jù)的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
本篇文章主要介紹了jquery replace方法去空格的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
jQuery視差滾動(dòng)效果網(wǎng)頁實(shí)現(xiàn)方法經(jīng)驗(yàn)總結(jié)
這篇文章主要介紹了jQuery視差滾動(dòng)效果網(wǎng)頁實(shí)現(xiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery滾動(dòng)效果的實(shí)現(xiàn)步驟、操作技巧及相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-09-09
本文主要介紹了Ajax基本概念；Ajax的異步加載局部刷新功能的實(shí)現(xiàn)；通過XMLHttpRequest發(fā)送請(qǐng)求。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
Jquery中給animation加更多的運(yùn)作效果實(shí)例
這篇文章介紹了Jquery中給animation加更多的運(yùn)作效果實(shí)例，有需要的朋友可以參考一下2013-09-09