CheckBox在表格中全选、部分选和反选

最新推荐文章于 2024-04-08 11:02:01 发布

翱翔天地

最新推荐文章于 2024-04-08 11:02:01 发布

阅读量6.3k

点赞数 1

分类专栏： HTML JQuery JavaScript CSS 文章标签： CheckBox table中checkbox全选和反选 checkbox部分选

本文链接：https://blog.csdn.net/you23hai45/article/details/9229589

版权

这篇博客介绍了如何在表格中使用CheckBox实现全选、部分选择和反选功能，通过示例代码TableCheckBox.html，详细解析了（1）全选操作，（2）部分选择的实现，以及（3）如何执行反选，即全不选的逻辑。

摘要由CSDN通过智能技术生成

1、源码如下，TableCheckBox.html

TableCheckBox.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table中的CheckBox</title>
<script type="text/javascript" src="script/jquery-1.10.1.js"></script>
<style type="text/css">
   body
   {
     width:100%;
     height:100%;
     font-size:12px;
   }
   table
   {
     width:80%;
     height:100%;
   }
   .tr_odd
   {
     background: #EBF2FE;
   }
   .tr_even
   {
     background: #B4CDE6;
   }
   .tab_body
   {
     text-align: center;
   }
</style>
<script type="text/javascript">
   $(function(){
	   $("tr:odd").addClass("tr_odd");//奇数行背景色
	   $("tr:even").addClass("tr_even");//偶数行背景色
	   
	   $("#ckb_head").click(function(){
		   if($(this).prop("checked")){//全选
			   $("input[name='ckb']").attr("checked","true");