jQuery复选框全选全不选代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.51texiao.cn/" />
<title>jQuery复选框全选全不选代码</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script 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>

posted @ 2015-07-20 17:05  EVEN2015  阅读(102)  评论(0编辑  收藏  举报