jQuery实现全选、反选、全不选效果
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选、反选、全不选</title>
<script language="javascript" type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
$(function(){
$("#btn_all").click(function(){
$.each($("input[name='ids']"),function(){
this.checked=true;
})
});
$("#btn_notall").click(function(){
$("input[name='ids']").attr("checked",false);
});
$("#btn_fanxuan").click(function(){
$.each($("input[name='ids']"),function(){
if(this.checked){
this.checked=false;
}else{
}
});
});
$("#isSelect").click(function(){
if(this.checked){
$.each($("input[name='ids']"),function(){
this.checked=true;
});
}else{
$("input[name='ids']").attr("checked",false);
}
});
$("#btn_del_sel").click(function(){
var str="";
$.each($("input[name='ids']"),function(){
if(this.checked){
str+=this.value+"\n";
}
});
alert (str);
});
});
</script>
</head>
<body>
<table width="600" border="1" align="center">
<tr>
<td width="29" bgcolor="#CCCCCC"><input type="checkbox" id="isSelect" name="isSelect" value="1"></td>
<td width="129" align="center" bgcolor="#CCCCCC">姓名</td>
<td width="79" align="center"bgcolor="#CCCCCC">性别</td>
<td width="79" align="center"bgcolor="#CCCCCC">年龄</td>
<td width="79" align="center" bgcolor="#CCCCCC">学号</td>
<td width="79" align="center" bgcolor="#CCCCCC">女友</td>
<td width="80" align="center" bgcolor="#CCCCCC">电话</td>
</tr>
<tr>
<td><input type="checkbox" id="ids2" name="ids" value="1" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids3" name="ids" value="2" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids4" name="ids" value="3" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids5" name="ids" value="4" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids6" name="ids" value="5" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids7" name="ids" value="6" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids8" name="ids" value="7" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids9" name="ids" value="8" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids10" name="ids" value="9" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids11" name="ids" value="10" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids12" name="ids" value="11" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids13" name="ids" value="12" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids14" name="ids" value="13" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids15" name="ids" value="14" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids16" name="ids" value="15" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids17" name="ids" value="16" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids18" name="ids" value="1" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids19" name="ids" value="17" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids20" name="ids" value="18" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="ids21" name="ids" value="19" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="8" align="center">
<input type="button" value="全选" id="btn_all" />
<input type="button" value="全不选" id="btn_notall"/>
<input type="button" value="反选" id="btn_fanxuan"/>
<input type="button" value=" 删除选中项" id="btn_del_sel"/></td>
</tr>
</table>
</body>
</html>