快捷導(dǎo)航

jquery 實(shí)現(xiàn)的全選和反選

更新時(shí)間：2009年04月15日 22:36:54 作者：

jquery 全選實(shí)現(xiàn)代碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
#newsTable{margin:100px auto;} 
</style> 
<script language="javascript" type="text/javascript" src="jquery1.1.2.js"></script><!-上傳到網(wǎng)絡(luò)上用這個(gè)做連接--> 
<script language="javascript" type="text/javascript"> 
//阿會(huì)楠練習(xí) 2009-4-13 
$(document).ready(function(){ 
$("#btnOk").click(function(){ 
this.value = this.value == "全選"?"反選":"全選"; 
$("input[@type='checkbox']").checkCbx(); 
}); 
}); 
//當(dāng)你的代碼出現(xiàn)each時(shí)，你應(yīng)該重寫上面的代碼來(lái)構(gòu)造一個(gè)插件,jquery教程中的一句話 
$.fn.checkCbx = function(){ 
return this.each(function(){ 
this.checked = !this.checked; 
}); 
} 
</script> 
<title>無(wú)標(biāo)題文檔</title> 
</head> 

<body> 
<table border="1" id="newsTable"> 
<tr> 
<th>選擇</th> 
<th>Id</th> 
<th>作者</th> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>1</td> 
<td>阿會(huì)楠</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>2</td> 
<td>阿會(huì)楠</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>3</td> 
<td>阿會(huì)楠</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>4</td> 
<td>阿會(huì)楠</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>5</td> 
<td>阿會(huì)楠</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>6</td> 
<td>阿會(huì)楠</td> 
</tr> 
<tr> 
<td colspan="3"><input type="button" name="btnOk" id="btnOk" value="全選" /></td> 
</tr> 
</table> 
</body> 
</html>

您可能感興趣的文章:

相關(guān)文章

jQuery 拖動(dòng)層(在可視區(qū)域范圍內(nèi))
獲取層元素，在瀏覽器可視區(qū)域的最左、最邊，最上、最下的值。并且在拖動(dòng)層的過(guò)程中，把當(dāng)前層的坐標(biāo)值，去和這幾個(gè)值，做比較，如果超過(guò)這些值。那么就不能再拖動(dòng)這個(gè)方向，即把值設(shè)為最小或最大
2012-05-05
單獨(dú)使用CKFinder選擇圖片的方法
單獨(dú)使用CKFinder選擇圖片的方法，非常不錯(cuò)的效果。
2010-08-08
jQuery dialog 異步調(diào)用ashx,webservice數(shù)據(jù)的代碼
點(diǎn)擊按鈕，在彈出的jQuery.dialog中，顯示異步返回的數(shù)據(jù)。WebService可以寫復(fù)雜的函數(shù)，ashx可以根據(jù)傳過(guò)來(lái)的參數(shù)調(diào)用不同的方法，達(dá)到同樣的效果。
2010-08-08
json定義及jquery操作json的方法
下面小編就為大家?guī)?lái)一篇json定義及jquery操作json的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
jquery.pagination.js分頁(yè)使用教程
這篇文章主要為大家詳細(xì)介紹了jquery.pagination.js分頁(yè)使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
jQuery知識(shí)點(diǎn)整理
這篇文章主要介紹了jQuery知識(shí)點(diǎn)整理的相關(guān)資料,需要的朋友可以參考下
2015-01-01
多個(gè)datatable共存造成多個(gè)表格的checkbox都被選中
所以當(dāng)有多個(gè)datatable 引用到一個(gè)頁(yè)面中的時(shí)候，全選事件會(huì)匹配全部的datatable，所以造成全部多個(gè)表格的checkbox被都被選中
2013-07-07
jquery加載圖片時(shí)以淡入方式顯示的方法
這篇文章主要介紹了jquery加載圖片時(shí)以淡入方式顯示的方法,涉及hide與fadeIn等方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
JQuery實(shí)現(xiàn)展開關(guān)閉層的方法
這篇文章主要介紹了JQuery實(shí)現(xiàn)展開關(guān)閉層的方法,實(shí)例分析了jQuery的slideToggle方法使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
jquery showModelDialog的使用方法示例詳解
這篇文章主要介紹了window.showModalDialog的使用方法，大家要以參考使用
2013-11-11