全选、反选和全不选效果（jQuery）
2017-05-24 本文已影响137人
被时光移动的城
本文内容比较简单却很常用，主要讲述使用jQuery的选择器实现全选、全不选（两种方法实现）及反选（两种方法实现）的效果。
效果图：
全选、全不选及反选效果.gif
详情见文中代码注释。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//全选
$("#qx").click(function(){
$("#che :checkbox").prop('checked',true);
})
//全不选
$("#qbx").click(function(){
//使用prop将checked属性改为false（建议），或者删除checked属性（不建议）。
$("#che :checkbox").prop('checked',false);//方法一：将checked属性改为false
// $("#che :checkbox").removeProp('checked');//方法二：删除checked属性
})
//反选方法一：先得到已经被选择的对象，然后全选，再将之前被选择的对象删除checked属性
// $("#fx").click(function(){
// var yx = $("#che :checked");
// $("#che :checkbox").prop('checked',true);
// yx.removeProp('checked');
// })
// 反选方法二:
// prop(‘checked’,函数(参数一，参数二));函数是用来设置当前属性(checked)的属性值的，里面两个参数，可设为i,val。
// i代表当前元素序号，val代表当前属性的属性值。
$("#fx").click(function(){
$("#che :checkbox").prop('checked',function(i,val){
return !val;//返回当前属性值相反的值
})
})
})
</script>
</head>
<body>
<input type="button" id="qx" value="全选" />
<input type="button" id="qbx" value="全不选" />
<input type="button" id="fx" value="反选" />
<br /><br />
<table id="che">
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>好好学习，天天向上</td>
</tr>
</table>
</body>
</html>
如有问题欢迎交流。
如转载请注明出处，谢谢！
