<!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 全选
winform DataGridView表头带CheckBox全选；winform DataGridView表头带CheckBox全选
checkBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——js
DevExpress 实现checkbox全选效果，内有主要代码，虽不能直接运行，但是都有详细的注释说明
js实现checkbox 全选和取消 自己亲测可以使用
高级控件（datagridview等）中加入checkbox实现全选和反选经典例子
Checkbox全选反选.html
CheckBox全选与否，及删除问题
android checkbox全选反选
flex Datagrid checkbox全选 Datagrid
ExpandableListView中group和child自定义视图带CheckBox，实现child全选、部分选中功能，同时实现类似邮件群发的用户选择功能，选中的用户在EditText中显示，点击后移除. 更新： 1. ExpandableListView勾选后生成的...
JS控制checkbox全选、取消全选、删除功能的代码贴出来。 看下面两种实现方法：
三种方式实现checkbox全选，反选，最简单的js技术；基于java代码，简单易懂，提供三3个demo，每一个都能实现
C#实现 DataGridViewCheckBoxColumn CheckBox全选
WPF 实现CheckBox全选、反选功能，界面简单实用，功能代码可以很好地套用到自己的项目，希望对有需要的小伙伴有帮助。
android ListView中的checkBox全选和反选Demo
asp.net(C#)，DataList控件里嵌入CheckBox，实现全选、反选以及删除功能。
vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件
checkbox.html 博文链接：https://crazymud.iteye.com/blog/426702
本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下： 通过checkbox 进行全选和取消全选的操作，如果通过toggle进行处理，则会出现checkbox无法显示对勾的问题。 使用click事件，根据...