快捷導(dǎo)航

jQuery實(shí)現(xiàn)復(fù)選框全選/取消全選/反選及獲得選擇的值

更新時(shí)間：2014年06月12日 10:13:54 投稿：whsnow

這篇文章主要介紹了jQuery實(shí)現(xiàn)的復(fù)選框全選/取消全選/反選及獲得選擇的值,需要的朋友可以參考下

 
<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
// 全選/取消全部 
$("#checkAllChange").click(function() { 
if (this.checked == true) { 
$(".userid").each(function() { 
this.checked = true; 
}); 
} else { 
$(".userid").each(function() { 
this.checked = false; 
}); 
} 
}); 
// 全選 
$("#checkAll").click(function() { 
$(".userid").each(function() { 
this.checked = true; 
}); 
}); 
// 取消全部 
$("#removeAll").click(function() { 
$(".userid").each(function() { 
this.checked = false; 
}); 
}); 
// 反選 
$("#reverse").click(function() { 
$(".userid").each(function() { 
if (this.checked == true) { 
this.checked = false; 
} else { 
this.checked = true; 
} 
}) 
}); 
//批量刪除 
$("#delAll").click(function() { 
var arrUserid = new Array(); 
$(".userid").each(function(i) { 
if (this.checked == true) { 
arrUserid[i] = $(this).val(); 
} 
}); 
alert("批量刪除的:" + arrUserid); 
}); 
}); 
</script> 
</head> 

<body> 
<table border="1"> 
<tr> 
<td><input type="checkbox" id="checkAllChange" /></td> 
<td>用戶(hù)id</td> 
<td>用戶(hù)名</td> 
<td>電話(huà)</td> 
<td>地址</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="1" /></td> 
<td>1</td> 
<td>wangzs1</td> 
<td>18888000</td> 
<td>浦東</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="2" /></td> 
<td>2</td> 
<td>wangzs2</td> 
<td>18888001</td> 
<td>上海</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="3" /></td> 
<td>3</td> 
<td>wangzs3</td> 
<td>18888002</td> 
<td>河南</td> 
</tr> 
<tr> 
<td><input type="checkbox" class="userid" value="4" /></td> 
<td>4</td> 
<td>wangzs4</td> 
<td>18888003</td> 
<td>許昌</td> 
</tr> 
<tr> 
<td></td> 
<td><input type="button" id="checkAll" value="全選" /></td> 
<td><input type="button" id="removeAll" value="取消全部" /></td> 
<td><input type="button" id="reverse" value="反選" /></td> 
</tr> 
<tr> 
<td colspan="4" align="center"><input type="button" value="批量刪除" id="delAll"></td> 
</tr> 
</table> 
</body> 

</html> 

您可能感興趣的文章:

相關(guān)文章

一個(gè)簡(jiǎn)單的jquery進(jìn)度條示例
這篇文章主要介紹了一個(gè)簡(jiǎn)單的jquery進(jìn)度條示例,需要的朋友可以參考下
2014-04-04
jquery實(shí)現(xiàn)簡(jiǎn)易的移動(dòng)端驗(yàn)證表單
本文給大家匯總介紹了幾個(gè)常用的jquery實(shí)現(xiàn)簡(jiǎn)易的移動(dòng)端驗(yàn)證表單，非常的實(shí)用，有需要的小伙伴可以進(jìn)來(lái)參考下。
2015-11-11
jQuery制作圣誕主題頁(yè)面更像是愛(ài)情影集
這篇文章主要為大家詳細(xì)介紹了jQuery制作圣誕主題頁(yè)面的方法，類(lèi)似動(dòng)感影集，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
基于jQuery實(shí)現(xiàn)交互體驗(yàn)社會(huì)化分享代碼附源碼下載
基于jQuery實(shí)現(xiàn)交互體驗(yàn)社會(huì)化分享代碼附源碼下載。這是一款鼠標(biāo)點(diǎn)擊分享按鈕向右滑出騰訊微博，新浪微博，QQ空間，豆瓣，微信，二維碼分享等分享平臺(tái)，本段代碼比較實(shí)用，需要的朋友參考下吧
2016-01-01
用jquery實(shí)現(xiàn)點(diǎn)擊欄目背景色改變
用jquery如何實(shí)現(xiàn)點(diǎn)擊一欄目實(shí)現(xiàn)欄目變色，再點(diǎn)擊另一欄目也變色，但原來(lái)的變回原色,本文提供解決方法，需要了解的朋友可以參考下
2012-12-12
單元選擇合并變色示例代碼
這篇文章主要介紹了如何實(shí)現(xiàn)單元選擇合并變色，感覺(jué)還不錯(cuò)的一個(gè)小功能，大家可以學(xué)習(xí)下
2014-05-05
jQuery 源碼分析筆記(7) Queue
queue是用來(lái)維護(hù)函數(shù)隊(duì)列的。比較常用的是queue(queueName, callback);其中queueName缺省是fn，即標(biāo)準(zhǔn)函數(shù)隊(duì)列。
2011-06-06
jQuery循環(huán)動(dòng)畫(huà)與獲取組件尺寸的方法
這篇文章主要介紹了jQuery循環(huán)動(dòng)畫(huà)與獲取組件尺寸的方法,實(shí)例分析了animate用法及組件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
jQuery中prepend（）方法使用詳解
prepend（）方法可以將指定元素插入匹配元素內(nèi)部開(kāi)頭，主要用到content和selector參數(shù)，這篇文章主要給大家介紹jQuery中prepend（）方法使用，需要的朋友可以參考下
2015-08-08
jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
jQuery插件slick是一款響應(yīng)式、適用于移動(dòng)設(shè)備觸摸屏、可滑動(dòng)顯示的jQuery幻燈片插件。該幻燈片插件可以設(shè)置多種顯示效果，可以自動(dòng)播放，是一款移動(dòng)優(yōu)先的jQuery幻燈片插件。
2015-04-04