jquery实现全选，反选，取消的操作
2024-09-03 18:57:40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkAll()"/>
<input type="button" value="反选" onclick="notCheck()"/>
<input type="button" value="取消" onclick="notCheckAll()"/>
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>ip</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>20012</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>20012</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>20012</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>20012</td>
</tr>
</tbody>
</table>
<script src="jquery.js"></script>
<script>
function checkAll() {
$('#tb :checkbox').prop('checked',true);
}
function notCheckAll(){
$('#tb :checkbox').prop('checked',false);
}
function notCheck() {
$('#tb :checkbox').each(function (k) {
// this,指代的是当前循环的每个元素
// 使用dom方法
// if(this.checked){
// this.checked=false
// }else{this.checked=true;}
// 使用jquery的第一种方式：
// if($(this).prop('checked')){
// $(this).prop('checked',false)
// }else{$(this).prop('checked'),true;}
// 使用三元运算进一步精简版的jquery实现方式
var v= $(this).prop('checked')?false:true;
$(this).prop('checked',v);
})
}
</script>
</body>
</html>
最新文章
- iOS － 对UIColor颜色反差
- cocos2dx骨骼动画Armature源码分析(一)
- spring-boot启动信息中non-fatal error
- Moqui学习之代码分析mantle priceServices.xml
- 运行基准测试hadoop集群中的问题：org.apache.hadoop.ipc.RemoteException: java.io.IOException: File /benchmarks/TestDFSIO/io_data/test_
- 修改delphi xe6 FMX Label字体颜色
- 多浏览器兼容flv视频播放HTML
- CSDN总结的面试中的十大可视化工具
- easyui的combobox将得到的数据设定为下拉框默认值和复选框设定默认值
- gcc 的include path和lib path调整
- Promise对象的简单用法
- SCOI 2015 Day2 简要题解
- [转帖]MBR与UEFI
- spring boot 测试用例
- iOS系统中导航栏的转场解决方案与最佳实践
- Kali-linux使用Aircrack-ng工具破解无线网络
- linux shell学习四
- 2011 Multi-University Training Contest 7 - Host by ECNU
- Python正则表达式基础
- Git 之 与Github交互