<!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=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

function getSum()

{

	var itemNodes = document.getElementsByName("item");

	var sum = 0;

	for(var i=0; i<itemNodes.length; i++)

	{

		if(itemNodes[i].checked)

		{

			sum += parseInt(itemNodes[i].value);

		}

	}

	var spanNode = document.getElementById("spanId");

	var str = sum + "元";

	spanNode.innerHTML = str.fontsize(10);

}

function checkAll(checkallNode)

{

	var itemNodes = document.getElementsByName("item");

	for(var i=0; i<itemNodes.length; i++)

	{

		itemNodes[i].checked = checkallNode.checked;

	}

}

</script>

</head>

<body>

<input type="checkbox" name="all" onclick="checkAll(this)"/>全选<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="button" value="计算金额" onclick="getSum(this)"/> <span id="spanId"></span>

</body>

</html>

JavaScript -- 操作input CheckBox 全选框的更多相关文章

  1. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  2. input checkbox复选框点击获取当前选中状态jquery

    function checkAll(id) { //用is判断 // let checkStatus=$(id).is(':checked'); // console.log(checkStatus) ...

  3. input checkbox 复选框大小修改

    设置zoom属性(放大) 利用style: <input type="checkbox" name="returnfee"  style="zo ...

  4. JavaScript操作checkbox复选框

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  5. 转载：Bootstrap之表格checkbox复选框全选

    转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...

  6. Bootstrap之表格checkbox复选框全选

    效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class="table table-bordered table-hov ...

  7. Bootstrap之表格checkbox复选框全选 [转]

    转自: http://blog.csdn.net/shangmingchao/article/details/49761315 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以 ...

  8. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  9. js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

随机推荐

  1. FastExcel遇到的问题

    第一次使用FastExcel发现在创建excel文件的时候不成功,一直报这个问题: org.apache.poi.EmptyFileException: The supplied file was e ...

  2. 【转】.Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法

    阐述签名工具这个概念之前,我先说说它不是什么: 1.它不是用于给程序集加密的工具,它与阻止Reflector或ILSpy对程序集进行反编译一毛钱关系都没有. 2.它很讨厌人们把它和加密联系在一起. 我 ...

  3. SVN中分支的建立与合并

    转载    出处:http://yaozhong1988.blog.163.com/blog/static/141737885201162671635126/ 一.  SVN分支的意义:     简单 ...

  4. Hadoop “Name node is in safe mode” 错误解决方法

    Hadoop 解除 "Name node is in safe mode" 运行hadoop程序时,有时候会报以下错误:org.apache.hadoop.dfs.SafeMode ...

  5. web.xml文件配置说明

    web.xml作用: web.xml主要用来配置Filter.Listener.Servlet等,当我们去启动一个WEB项目时,容器(jetty.tomcat等)首先会读取项目web.xml配置文件里 ...

  6. sqlserver整理的实用资料

    1 --- 创建 备份数据的 device 2 3 USE DB_ZJ 4 EXEC sp_addumpdevice 'disk', 'testBack', 'c:\MyNwind_1.dat' 5 ...

  7. 【saltstack】saltstack执行结果和事件存储到mysql

    前言 项目中使用saltstack有一段时间了,之前都是在控制台操作,后来感觉越来越不方便,每次操作需要登陆服务器,还需要记一堆命令.最重要的是,公司进新人之后,新人由于不熟悉saltstack,容易 ...

  8. php会话技术之Session用法

    php会话技术之Session用法举例. 本文原始链接:http://www.jbxue.com/article/8940.html1.创建session <?php     //创建sessi ...

  9. MVC4 中使用 Area 和 注意的地方

    在MVC项目中经常会使用到Area来分开不同的模块让项目结构更加的清晰. 步骤如下:  项目 –> 添加 -> 区域 (Area)  输入 Admin 添加成功后 Area包含:创建一个空 ...

  10. offsetHeight+scrollHeight+clientHeight

    ch 窗口可见区域高度 :ch = padding + height(height不是所有内容的高度,是样式定义的高度) oh border以内的内容高度: oh = border + padding ...