checkbox全选和取消，附带单击表格tr选中功能

news/2024/10/18 0:29:50/

<html>
<head>
test
</head>
<body>
<table width="300px" border="1"><tr><th><input type="button" style="display:block" id="selectAll" value="全选"><input type="button" style="display:none" id="closeAll" value="取消"></th></tr><tr><td><input type="checkbox" name="checkbox" /></td><td>2</td><td>1</td></tr><tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr><tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr><tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr><tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr><tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr><tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr><tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr><tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr><tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr>
</table>
</body>
</html>
<script type="text/javascript" src="../../../static/application/js/jquery.min.js"></script>
<script>jQuery(function($){$("#selectAll").click(function(){$("input[name='checkbox']").prop("checked","true");document.getElementById("closeAll").style.display="block";document.getElementById("selectAll").style.display="none";})$("#closeAll").click(function(){$("input[name='checkbox']").prop("checked",false);document.getElementById("selectAll").style.display="block";document.getElementById("closeAll").style.display="none";})})/*** 点击表格选中*/$(function () {//除了表头（第一行）以外所有的行添加click事件.$("tr").slice(1).click(function () {// 切换样式$(this).toggleClass("tr_active");// 找到checkbox对象var chks = $("input[type='checkbox']",this);var tag = $(this).attr("tag");if(tag=="selected"){// 之前已选中，设置为未选中$(this).attr("tag","");chks.prop("checked",false);}else{// 之前未选中，设置为选中$(this).attr("tag","selected");chks.prop("checked",true);}});});
</script>

checkbox全选和取消，附带单击表格tr选中功能

相关文章

基于Linux内核红黑树的TR069参数解析工具：树形结构+CPE RPC支持

【HTML】表格标签（table，tr，td）

TR-069 Device:2.11 Root Object definition， tr-181-2-11-0.xml

Table动态添加数据实现tr滚动

表格标签 table标签 tr标签单元格间距单元格居中加粗表单居中

TR外汇黑平台资金盘深度揭秘，谨防上当受骗，迟早会跑路

table样式测试总结tr td宽度分析

SAP ABAP SE09 TR请求传输技巧