jquery全选 反选全不选效果
时间：6年前 阅读：4683
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 全选
$('#qx').click(function(){
// 找到所有的复选框,加上checked属性,属性值为真true 选择表单元素的要用冒号 :checkbox
// checked属性,值为true选中
$('#ta :checkbox').prop('checked',true)
})
// 全不选
$('#qbx').click(function(){
// 找到所有的复选框,加上checked属性,属性值为false 选择表单元素的要用冒号 :checkbox
// checked属性,值为false不选中
// (1)可以这样选
// $('#ta :checkbox').prop('checked',false);
// (2)可以这样选 removeProp是将class里面的值清空
$('#ta :checkbox').removeProp('checked');
})
// 反选(1)第一种方法
// $('#fx').click(function(){
//// 获得现在处在选中状态下的元素
// var ee = $('#ta :checked');
//// 全选
// $('#ta :checkbox').prop('checked',true)
//// 将刚才处在被选中状态的元素取消选中状态
// ee.removeProp('checked');
// })
// 反选(2)第二种方法
$('#fx').click(function(){
// 每处理一个复选框就会执行一下这个function
// i当前这个元素的序号,val指的是当前这个属性的属性值
$('#ta :checkbox').prop('checked',function(i,val){
// 返回一个!val 相反的val 比如属性值是true 相反的就是false;
return !val;
})
})
})
</script>
</head>
<body>
<input type="button" name="" id="qbx" value="全不选按钮" />
<input type="button" name="" id="qx" value="全选按钮" />
<input type="button" name="" id="fx" value="反选按钮" />
<table id="ta">
<tr>
<td><input type="checkbox" /></td>
<td>电视剧01</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>电视剧02</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>电视剧03</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>电视剧04</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>电视剧05</td>
</tr>
</table>
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论