主要功能：
1、选择行标题的复选框(checkbox)会对列表页面的其他复选框进行相应的全选中和全不选中
2、选择表格中的复选框，根据表格中的复选框是否全部被选中，确定标题行的复选框是否是选中状态
功能实现代码如下：
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!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=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
//全选/全不选
function funCheckAll(obj){
var items = document.getElementsByTagName("input");
for(var i=0;i<items.length;i++){
if(items[i].type=="checkbox"&& items[i].name=="checkSel")
items[i].checked = obj.checked;
}
}
//普通复选框脚本
function funCheck(){
var flg = true;
var items = document.getElementsByTagName("input");
for(var i=0;i<items.length;i++){
if(items[i].type=="checkbox"&& items[i].name=="checkSel"){
if(!items[i].checked){
flg = false;
break;
}
}
}
document.getElementById("cbSelectAll").checked= flg;
}
</script>
</head>
<body>
<table border="1">
<tr>
<th><input type="checkbox" id='cbSelectAll' onclick="funCheckAll(this);"></th>
<th>标题</th>
</tr>
<tr>
<td>
<input type="checkbox" name='checkSel' onclick="funCheck()">
</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" name='checkSel' onclick="funCheck()">
</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" name='checkSel' onclick="funCheck()">
</td>
<td>3</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
### JavaScript 实现复选框...通过本篇文章的学习，我们了解了如何使用 JavaScript 实现复选框的全选与取消全选功能。这种功能在很多场景下都非常实用，如购物车、表格选择等。掌握这一技能有助于提高前端开发的能力。
在网页开发中，"js实现全选删除+jsp"是一个常见的功能需求，它涉及到JavaScript（js）和JavaServer Pages（jsp）的交互，主要用于提高用户体验，让用户能够方便地选择并删除多个项目。以下是对这个主题的详细解释： ...
1. **创建复选框**：首先，在JSP页面上，使用`s:iterator`遍历数据集，并为每个元素生成一个`<s:checkbox>`。每个复选框的name属性应该相同，以便于在JavaScript中操作，而value属性则应该设置为当前迭代项的唯一...
本文主要探讨了如何利用JavaScript结合Java Server Pages（JSP）技术实现网页上的复选框（checkBox）全选功能。在Web开发中，复选框通常用于提交用户的选择，而全选功能则是指用户可以一次性选择或取消选择所有复选...
例如，可以在JSP页面中添加一段JavaScript代码实现全选或全不选的功能： ```html <script language="javascript"> function selectAll() { if (!document.form.open.length) { document.form.open.checked = !...
这个“模拟select带checkbox全选反选取消插件”是一个专门为了解决这个问题而设计的工具。它允许用户通过复选框（checkbox）进行多选操作，并提供了全选、反选和取消选择的功能，极大地方便了用户交互。 首先，让...
本教程将重点讲解如何使用jQuery实现复选框的全选、反选以及获取选中值的功能。 首先，我们需要理解jQuery的基本用法。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。引入jQuery...
在页面上添加一个`<input type="checkbox">`作为全选按钮，当用户点击该按钮时，通过JavaScript遍历所有行中的复选框（假设每个数据行都有一个对应的复选框），并设置它们的状态为选中。例如，你可以添加以下...
#### 全选功能实现 **方法一** - **HTML结构** ```html <input type="checkbox" name="sel" onclick="selectAll();" id="ckAll"/>全选 <input type="checkbox" name="opt"/>火车 <input type="checkbox" name=...
2. 使用JavaScript实现全选和全不选的功能。 3. 监听提交事件，收集选中的复选框值。 4. 使用AJAX或表单提交方式将数据发送到服务器。 5. 服务器端接收数据并进行相应的业务处理。 通过这个过程，用户可以方便地在...
- `extjs复选框树.js`：这是实现上述功能的JavaScript代码，包括工具类和针对树节点的操作方法。 - `样式文件.css`：可能包含了一些自定义的样式，用于美化复选框和树的显示效果。 - `示例HTML文件.html`：演示如何...
其次，全不选功能实现的是将页面上所有的复选框取消选中状态。代码中的`unAllCkb`函数通过选择器`('[type=checkbox]:checkbox')`选中所有的复选框，并通过`.attr('checked', false)`方法将它们的`checked`属性设置为...
本文档中的代码片段展示了如何在JSP页面中实现全选与复选功能，并通过JavaScript来控制各个复选框的状态，最终目的是将用户选择的结果保存到数据库中。 ### 全选和复选的实现 #### 1. **理解全选和复选的逻辑** ...
在本教程中，我们将深入探讨如何使用JavaScript实现复选框的全选全不选功能。 首先，我们需要在HTML中设置复选框和全选/全不选按钮。例如： ```html <input type="checkbox" name="item" value="1"> Option 1...
1. **JSP页面结构**：页面采用JSP技术构建，通过`<%@ page %>`, `<%@ taglib %>`, `<c:forEach>`等标签实现了动态内容的渲染。该示例页面主要包含一个表单，用于展示一系列权限选项，并允许用户进行选择。 2. **...
接下来，如果需要在JSP页面上实现复选框的全选功能，可以通过JavaScript来控制。下面是一个示例代码，展示了如何使用JavaScript函数来控制全选复选框的行为： ```html function kk() { var handleEl = document....
通过上述示例代码，我们可以看到字符串的截取以及全选并删除功能的具体实现方式。这些功能不仅可以提升用户的使用体验，还能简化页面的设计，使整个系统更加高效易用。开发者可以根据实际情况调整代码细节，以适应...
在JSP页面上，我们可以使用JavaScript或者jQuery来实现全选和反选的逻辑。例如，当用户点击全选按钮时，所有checkbox会被选中；反之，点击反选则取消所有选中。分页功能通常涉及Ajax异步请求，用户在每一页进行选择...