<html>
<head>
<script language="javascript" src="./jquery.js" ></script>
<title>JS获取上传文件的绝对路径，兼容IE和FF</title>
<script>
$(function(){
$(".datatable thead").addClass('title');
$(".datatable tbody tr:even").addClass('even');//偶数行，从0开始
$(".datatable tbody tr:odd").addClass('odd')//单数
//鼠标滑过高亮
$('.datatable tbody tr').bind('mouseover',function(){
this.className='hover';
}).bind('mouseout',function(){
if(this.rowIndex%2==0){
this.className='even';
}else{
this.className='odd';
}
});
})
//全选
function checkall(checkmainname,checkename)
{
$(":checkbox[name='"+checkename+"']").attr("checked",$("#"+checkmainname).attr("checked"));
}
// 如果不是全部选中 全选取消选中 是全部选中 全选按钮选中
function childcheck(checkmainname,checkename)
{
if($(":checkbox[name='"+checkename+"']:checked").length>=$(":checkbox[name='"+checkename+"']").length){
$("#"+checkmainname).attr("checked","checked");
}else{
$("#"+checkmainname).removeAttr("checked");
}
}
</script>
<style type="text/css">
.title{ background:#00FF99;}
.even{ background: #ecf6fc; }
.odd{background:#E5ECF9}
.hover{ background:#4caee6; }
</style>
</head>
<body>
<table width="100%" border="1" class="datatable">
<thead>
<tr>
<th> <input type="checkbox" name="main" id="main" onclick="checkall('main','child')" /></th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr></thead>
<tbody>
<tr>
<td><input type="checkbox" name="child" value="${id}"
onclick="childcheck('main','child')" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" name="child" value="${id}"
onclick="childcheck('main','child')" /> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" name="child" value="${id}"
onclick="childcheck('main','child')" /> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" name="child" value="${id}"
onclick="childcheck('main','child')" /> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
《SpreadJS：实现列头复选框全选功能详解》 SpreadJS 是一款强大的JavaScript电子表格库，由 GrapeCity 公司开发，它允许开发者在Web应用中创建、编辑和展示电子表格数据。在实际应用中，我们经常需要在列头添加复...
javascript 复选框全选，复选框全选，复选框全选
在这个场景下，我们将关注如何在`DataGridView`中实现复选框列的全选功能。这涉及到用户交互的增强，以及对事件响应的编程。 首先，我们需要在`DataGridView`中添加一个复选框列。这可以通过在设计时手动添加，或在...
用Axure RP 8.0做的原型设计列子，作用是复选框做全选和非全选，已选的做反选。可以学习下反选或非反选的交互思路。
js 实现 复选框全选（二）! 值得下载看看!资源免费,大家分享!!
### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
本文将深入探讨“复选框全选全不选JS代码”的实现原理、应用场景以及如何优化这段代码，以便开发者能够更好地理解和运用到实际项目中。 ### 复选框全选与全不选的概念 复选框（Checkbox）是Web表单中常见的元素，...
在JavaScript编程中，"js控制复选框全选、全不选"是一个常见的需求，尤其在数据表或者选项列表中，用户可能希望一次性选中或取消所有复选框。这个功能可以通过编写简单的JavaScript代码实现。这里我们将深入探讨如何...
本篇文章将详细探讨如何在`QTableWidget`或`QTableView`的表头中添加复选框，并实现全选/全不选的功能。 首先，我们需要了解`QTableWidgetItem`和`QHeaderView`。`QTableWidgetItem`是`QTableWidget`中的基本元素，...
有时候，我们希望在表格的表头中添加复选框，以便实现全选或取消全选的功能，这在处理大量数据时尤其有用。本篇文章将详细解释如何在`QTableWidget`的表头中添加复选框并实现全选功能。 首先，我们需要了解`...
本话题主要关注如何使用jQuery来实现复选框的全选和全不选功能。在HTML页面中，复选框是一种常见的表单元素，用于让用户可以选择多个选项中的一个或多个。全选和全不选功能则为用户提供了一种便捷的方式来一次性选择...
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
在实际应用中，为了提高用户体验，我们经常需要在`DataGridView`的行标题中添加复选框，以便用户可以方便地进行全选或反选操作。标题中的复选框全选功能无需额外的按钮触发，使得界面更加简洁高效。 本文将详细介绍...
这段代码首先计算当前选中的子复选框数量，如果等于所有子复选框的数量，说明所有都被选中，此时全选复选框应被选中；否则，全选复选框应取消选中。 以上就是使用jQuery实现复选框全选和反选的基本步骤。在实际项目...
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
axure复选框全选反选效果.rp
在本项目"JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2.0"中，我们将探讨如何利用JavaScript实现对复选框（checkbox）的全选、反选功能，并获取选中的复选框的值。这些功能在用户界面中常见于批量...
在网页开发中，表格（Table）是常用的数据展示方式，而复选框（Checkbox）则为用户提供多选功能。在HTML的表格中实现复选框的全选与反选功能，能够大大提升用户体验，使用户可以便捷地选择一组数据。这里我们将详细...
在IT领域，尤其是在前端开发中，"树结构 复选框 多选 全选功能"是一个常见的交互设计模式，广泛应用于数据管理、文件系统、菜单导航等场景。这一功能的实现涉及到数据结构、事件处理、状态管理等多个方面的技术。 ...
axure复选框全选效果