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