本文内容比较简单却很常用,主要讲述使用jQuery的选择器实现全选、全不选(两种方法实现)及反选(两种方法实现)的效果。
效果图:
详情见文中代码注释。
代码:
<!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>
如有问题欢迎交流。
如转载请注明出处,谢谢!