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");
}else{//全不选
$("input[name='ckb']").removeAttr("checked");
}
});
});
//部分选
function ckbSome(){
var flag = true;
var selectedCkb = document.getElementsByName("ckb");
for(var i=0;i<selectedCkb.length;i++){
if(selectedCkb[i].checked == false){
flag = false;
}
if(flag){
document.getElementsByName("check_box")[0].checked=true;
}else{
document.getElementsByName("check_box")[0].checked=false;
}
}
}
</script>
</head>
<body>
<table>
<tr style="background: #CCCCCC;text-align: center;">
<th><input type="checkbox" id="ckb_head" name="check_box"/></th>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr class="tab_body">
<td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
<td>2013060101</td>
<td>张华</td>
<td>23</td>
<td>男</td>
</tr>
<tr class="tab_body">
<td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
<td>2013060102</td>
<td>赵雪</td>
<td>24</td>
<td>女</td>
</tr>
<tr class="tab_body">
<td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
<td>2013060103</td>
<td>孙旭</td>
<td>21</td>
<td>男</td>
</tr>
<tr class="tab_body">
<td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
<td>2013060104</td>
<td>李姝</td>
<td>20</td>
<td>女</td>
</tr>
<tr class="tab_body">
<td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
<td>2013060105</td>
<td>公孙旭</td>
<td>22</td>
<td>男</td>
</tr>
<tr class="tab_body">
<td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
<td>2013060106</td>
<td>李枝花</td>
<td>24</td>
<td>女</td>
</tr>
<tr class="tab_body">
<td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
<td>2013060107</td>
<td>魏征</td>
<td>22</td>
<td>男</td>
</tr>
<tr class="tab_body">
<td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
<td>2013060108</td>
<td>施礼</td>
<td>20</td>
<td>女</td>
</tr>
<tr class="tab_body">
<td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
<td>2013060109</td>
<td>王志</td>
<td>23</td>
<td>男</td>
</tr>
<tr class="tab_body">
<td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
<td>2013060104</td>
<td>方小许</td>
<td>20</td>
<td>女</td>
</tr>
</table>
</body>
</html>
2、结果如下图：
（1）全选
（2）部分选
（3）反选（全不选）
分享到：
相关推荐
在上面的代码中，我们有一个全选复选框（`#selectAll`）和多个行内复选框（`.itemCheckbox`）。全选复选框用于控制所有行内复选框的状态。 接下来，我们使用JavaScript（通常配合jQuery库，但也可以使用原生JS）来...
在高级控件如DataGridView中，通过结合Checkbox可以实现全选和反选功能，为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
在Windows应用程序开发...总之，`DataGridView`表头添加`CheckBox`实现全选反选涉及了控件创建、事件处理、数据绑定以及用户交互等多个方面。理解这些知识点可以帮助开发者更有效地构建功能丰富的数据查看和编辑界面。
全选功能通常应用于具有多选选项的场景，如表格或列表中的复选框。要实现全选，我们首先需要一个复选框作为“全选”控制，当用户点击这个复选框时，所有相关的子复选框应被选中。jQuery 可以通过 `prop()` 方法来...
在这个例子中，开发者需要找到所有的表格行（`<tr>`）和复选框（`<input type="checkbox">`），并根据全选按钮的状态来改变它们的选中状态。 5. **遍历与迭代**： 为了实现全选和反选，需要遍历表格中的每一行，...
本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先，我们需要理解HTML中的复选框元素`<input type="checkbox">`，它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...
在JavaScript编程中，全选和反选功能是常见的交互元素，尤其在表格或者多选列表中，用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能，以提升用户体验。 首先，我们需要理解...
本文将深入探讨复选框的全选和反选机制及其在IT中的应用。 全选功能是指用户只需点击一个按钮或复选框，就能同时选中所有相关的复选框。这通常用在数据列表、表格或文件选择场景中。实现这一功能的关键在于正确地...
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
在JavaScript中，全选和反选功能通常应用于包含多个复选框（checkbox）的表单中。用户可以通过点击一个主复选框来选择或取消选择所有其他复选框。这个功能在网页表格、数据筛选等场景中非常常见，极大地提高了用户...
在 Vue 2.0 中实现 Table 全选和反选是一种常见的交互方式，本文将介绍如何在 Vue 2.0 中实现 Table 全选和反选的示例代码。 知识点 1: 使用 Vue 的模板语法实现 Table 的渲染 在示例代码中，我们可以看到使用 Vue...
这个"原生JS表格列表全选反选代码"就是一个解决此类问题的示例。下面将详细介绍这个示例中涉及的关键知识点。 1. **HTML表格（`<table>`）**： HTML表格是网页中用于组织数据的基本元素，由`<table>`、`<tr>`（行...
在网页开发中，全选和反选功能是常见的交互元素，尤其在表格或者多选项列表中，用户可能希望一键选择所有项目或清除已选。在这个案例中，我们将探讨如何使用HTML和jQuery来实现这一功能。 首先，我们需要创建HTML...
接下来，我们将讨论如何实现全选、反选、子选父和父选子的功能： 1. **全选**：可以通过遍历整个树并设置所有节点的`checked`属性为`true`来实现。这通常需要一个全局方法，接收树对象作为参数。 2. **反选**：与...
在 EasyUI 中，我们可以利用 `checkbox` 组件来创建复选框，并通过事件监听和数据同步来实现全选/反选的效果。下面将详细介绍如何实现这一功能： 1. **添加依赖** 首先，确保在 HTML 文件中引入了 EasyUI 的 CSS ...
标题“JQ全选和反选和取消”涉及的是jQuery中处理多选元素，如复选框或表格行的选择状态。在这个主题下，我们将深入探讨如何实现全选、反选以及取消选择的功能，并结合给出的`demo.html`文件进行实例分析。 1. **...
在这个场景中，我们关注的是如何利用jQuery来实现全选、取消选择、反选的功能，以及如何实现元素的拖拽效果。以下是关于这些功能的详细解释： **全选、取消和反选功能**： 1. **全选**：这个功能允许用户一键选中...