jquery input checked全选与反选1.3.2的版本

最新推荐文章于 2021-02-26 22:32:49 发布

原创最新推荐文章于 2021-02-26 22:32:49 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #脚本 #JavaScript #XHTML #HTML #ViewUI

JQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的示例，通过使用jQuery库来实现网页中表格数据的全选与反选功能。该示例包含了一个带有复选框的表格，并且提供了一个按钮用于切换所有复选框的状态。

“运行代码”后需要“刷新一次”：

<!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> 
<title>无标题页</title> 
<script language="javascript" type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$.fn.checkCbx = function(){ 
return this.each(function(){ 
this.checked = !this.checked; 
}); 
} 
$(function(){ 
$("#btnSelect").click(function(){ 
this.value = this.value == "全选"?"反选":"全选"; 
$("input:checkbox").checkCbx(); 
}) 
}) 
</script> 
</head> 
<body> 
<form name="form1" method="post" action="Default8.aspx" id="form1"> 
<table border="1"> 
<tr> 
<th>选择</th> 
<th>id</th> 
<th>姓名</th> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>1</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>2</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>3</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>4</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>5</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>6</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>7</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>8</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>9</td> 
<td>脚本之家</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>10</td> 
<td>脚本之家</td> 
</tr> 
</table> 
<input id="btnSelect" type="button" value="全选" /> 
</form> 
</body> 
</html>