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 獲取/設置對象的屬性值,如:
$("input[name='chk_list']").attr("checked"); //讀取所有name為'chk_list'對象的狀態(tài)(是否選中)
$("input[name='chk_list']").attr("checked",true); //設置所有name為'chk_list'對象的checked為true
再如:
$("#img_1").attr("src","test.jpg"); //設置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 獲取/設置對象的屬性值,如:
復制代碼 代碼如下:
$("input[name='chk_list']").attr("checked"); //讀取所有name為'chk_list'對象的狀態(tài)(是否選中)
$("input[name='chk_list']").attr("checked",true); //設置所有name為'chk_list'對象的checked為true
再如:
復制代碼 代碼如下:
$("#img_1").attr("src","test.jpg"); //設置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)代碼小結
- jquery復選框CHECKBOX全選、反選
- JQUERY CHECKBOX全選,取消全選,反選方法三
- jquery中checkbox全選失效的解決方法
- jquery 實現(xiàn)checkbox全選,反選,全不選等功能代碼(奇數(shù))
- jquery數(shù)組之存放checkbox全選值示例代碼
- Jquery CheckBox全選方法代碼附js checkbox全選反選代碼
- jquery checkbox全選反選效果代碼
- jQuery實現(xiàn)CheckBox全選、全不選功能
- jQuery實現(xiàn)table表格checkbox全選的方法分析
相關文章
兩個select之間option的互相添加操作(jquery實現(xiàn))
兩個select,將其中一個select選中的選項添加到另一個select中,或者點擊全部添加按鈕將所有的option都添加過去.2009-11-11jquery toolbar與網(wǎng)頁浮動工具條具體實現(xiàn)代碼
toolbar 網(wǎng)頁浮動工具條非常實用的一個功能,下面為大家介紹下使用jquery如何快速做到2014-01-01深入分析jQuery的ready函數(shù)是如何工作的(工作原理)
這篇文章主要介紹了jQuery的ready函數(shù)是如何工作的,深入分析了jQueryready函數(shù)的運作流程及相應的工作原理,需要的朋友可以參考下2015-12-12jQuery實現(xiàn)的省市縣三級聯(lián)動菜單效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的省市縣三級聯(lián)動菜單效果,結合完整實例形式分析了jQuery數(shù)組操作及事件響應的相關技巧,非常具有實用價值,需要的朋友可以參考下2016-08-08