<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../Day26/doctool.js"></script>
<script type="text/javascript">
//1,获取被选中的checkbox,通过checked属性的状态完成。
//2,获取被选择checkbox的value的金额。
//3，求和。
//4,定义span区域存储总金额。
function getSum()
{
var items = byName("item");
var sum = 0;
for(var x=0;x<items.length; x++)
{
if(items[x].checked)
sum += parseInt(items[x].value);
}
var spanNode = byId("sum");
var str = sum+"元";
spanNode.innerHTML = str.fontsize(7);
}
function checkAll(index)
{
var allNode = byName("all")[index];
var items = byName("item");
for(var x=0;x<items.length; x++)
{
items[x].checked = allNode.checked;
}
}
</script>
</head>
<body>
<input type="checkbox" name="all" onclick="checkAll(0)" />全选<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="all" onclick="checkAll(1)" />全选<br />
<input type="button" value="获取总金额" onclick="getSum()" /><span id="sum"></span>
</body>
</html>
分享到：
相关推荐
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
在提供的RAR文件"DevExpress 实现checkbox全选效果"中，可能包含了实现这个功能的代码示例。这些示例代码可能包含了窗体设计、控件初始化、事件处理函数等内容，通过阅读和理解这些代码，你可以学习到如何在...
在这个特定的场景中，我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`，以便实现全选和全不选的功能。这将大大提升用户体验，使得用户可以快速地对所有行进行操作，如批量删除、更新等。 首先，我们需要...
这可以通过监听全选Checkbox的`CheckedChanged`事件来实现，然后遍历DataGridView的所有行，设置每一行的Checkbox为与全选Checkbox状态一致。 - **反选功能**：反选意味着取消所有已选中的项。这可以通过再次触发...
以下是三种实现Checkbox全选和反选的方法，以及它们的JavaScript和Java实现细节。 ### 方法一：使用`checked`属性 **JavaScript实现**： 在JavaScript中，可以通过获取全选按钮的`checked`属性来控制所有复选框的...
在ASP.NET开发中，CheckBox控件常常用于实现用户界面中的多选功能，而"CheckBox全选并删除"这个主题涉及到两个关键操作：全选和删除。全选功能允许用户一次性选择多个选项，删除则通常指的是从数据库或其他数据存储...
Checkbox全选反选.html
总结起来，实现Flex Datagrid checkbox全选功能主要涉及自定义数据列、表头渲染器和行渲染器，通过事件监听和状态同步来达到全选的效果。在实际应用中，可能还需要处理部分选中、反选等复杂逻辑，但上述步骤提供了一...
"Android CheckBox全选反选"这个话题主要涉及如何在ListView中实现CheckBox的选择与反选择操作，包括全选和反选的功能。ListView是Android系统提供的一种列表视图，它可以显示大量数据并允许用户进行交互。下面我们...
通过以上步骤，我们可以实现一个功能完善的WPF CheckBox全选设计。理解并熟练运用位运算和Flags特性，对于开发高效且易于维护的WPF应用至关重要。在实际项目中，可能还需要考虑其他因素，如性能优化、异常处理和用户...
ExpandableListView中group和child自定义视图带CheckBox，实现child全选、部分选中功能，同时实现类似邮件群发的用户选择功能，选中的用户在EditText中显示，点击后移除. 更新： 1. ExpandableListView勾选后生成的...
本教程将详细介绍如何在WPF中实现CheckBox的全选和反选功能。 首先，我们需要理解CheckBox的基本用法。在XAML中，我们可以创建一个CheckBox并为其设置文本和初始状态： ```xml <CheckBox Content="全选" x:Name=...
而在这个特定的场景中，我们需要实现一个增强的功能：在`DataGridView`的列头添加一个`CheckBox`，通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见，例如在批量...
在博文《flex在DataGrid中实现checkbox全选或取消》中，作者可能详细讲解了以下步骤： 1. 创建DataGrid，并绑定数据源。 2. 添加一个CheckBox组件，作为全选/取消全选的控制。 3. 实现CheckBox的change事件监听，...
综上所述，实现"checkbox全选，选中数据传到后台"的功能，涉及到前端的HTML、CSS、JavaScript（特别是AJAX）技术，以及后端的Struts2框架、Spring框架和Hibernate ORM的使用。此外，还需要对数据库操作有深入理解，...
全选功能通常是通过一个主复选框来实现的，当用户点击这个主复选框时，所有相关的子复选框会被自动选中或取消。这需要用到JavaScript或者jQuery来实现交互逻辑。例如，我们可以添加一个主复选框并监听其`change`事件...
在实际项目中，我们经常需要实现一个功能，即在ListView中加入CheckBox，让用户能够通过一个主CheckBox来控制所有子项CheckBox的选择状态，这就是所谓的全选/反选联动。在本文中，我们将深入探讨如何在WPF的MVVM...
标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框（checkbox）以及全选功能。EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列预定义的 CSS 样式和 JavaScript 组件，帮助...
asp.net(C#)，DataList控件里嵌入CheckBox，实现全选、反选以及删除功能。
vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件