<!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. cocos2d-x-3.1rc0中找不到"extensions/ExtensionMacros.h"的问题

    笔者导入UI编辑器的资源时,提示无法打开包括文件:“extensions/ExtensionMacros.h”: No such file or directory” 然后参考了3.0的一篇文章.得出 ...

  2. Linq 基本操作

    在linq中排序方法有: OrderBy()  --对某列升序排序 ThenBy()    --某列升序后对另一列后续升序排序 OrderByDescending() --对某列降序排序 ThenBy ...

  3. 发挥inline-block作用

    .pay-type { // 同行 display: inline-flex; padding: 0 @pay-type_2imgs_padding-width; } .pay-type_icon { ...

  4. Bridged Adapter（网桥模式）

    http://www.jianshu.com/p/f59a0695b164 https://technology.amis.nl/2014/01/27/a-short-guide-to-network ...

  5. Django 之 信号机制

    Django 之 信号机制 Django提供一种信号机制.其实就是观察者模式,又叫发布-订阅(Publish/Subscribe) . 当发生一些动作的时候,发出信号,然后监听了这个信号的函数就会执行 ...

  6. idea中maven 加载spring-boot项目程序包找不到解决…

    首先检查maven配置对不对,包括被settings文件以及资源库的位置,maven版本等. 如果不行的话再进行下面的操作: 第一种方案: 在终端terminal中项目目录下,输入“mvn idea: ...

  7. app开发需求文档怎么写

    我们在开发app前都会做需求分析,这个app开发需求文档怎么写呢?一般可以从这几点入手:确定APP方案的目标,APP方案的受众分析,APP开发方案功能设计,APP的操作系统说明方案,APP是是否是原生 ...

  8. Oracle 11G无法导出空表的解决办法

    11G中有个新特性,当表无数据时,不分配segment,以节省空间解决方法:1.insert一行,再rollback就产生segment了.该方法是在在空表中插入数据,再删除,则产生segment.导 ...

  9. 如何配置一个路径，能够既适合Linux平台，又适合Windows平台，可以从这个路径中读取文件

    如何配置一个路径,能够既适合Linux平台,又适合Windows平台,可以从这个路径中读取文件? 目的:就是希望在项目的配置文件中配上一样的路径,不管协作者使用的是什么平台,都能够读到文件. 比如:L ...

  10. Spring Boot之AOP面向切面编程-实战篇

    目录 前言 编程范式主要有以下几类 引入pom依赖 aop注解 实现日志分割功能 前言 AOP是一种与语言无关的程序思想.编程范式.项目业务逻辑中,将通用的模块以水平切割的方式进行分离统一处理,常用于 ...