<!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. Javascript中的函数中的this值

    看下面这段代码会在控制台上输出什么内容? <script> var url="fang.com"; var obj={ url:"soufun.com&quo ...

  2. FZU 1063 三维扫描（三维连通块）

    Accept: 415    Submit: 1291 Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Description 工业 ...

  3. 《UNIX网络编程》 -- 第六章

    6.3 select 函数 给出描述符1.4.5而 maxfdp1 设置为6的原因: maxfdp1 是值-结果参数,这里传递的是描述符的范围,类似之前的 size_of(length).又因为描述符 ...

  4. iOS蓝牙接收外设数据自动中断

    一.错误原因 在做iOS设备作为central,与蓝牙外设连接,接收蓝牙外设传输的数据时发生蓝牙中断. 在- (void)centralManager:(CBCentralManager *)cent ...

  5. Service Name Port Number Transport Protocol tcp udp 端口号16bit

    https://en.wikipedia.org/wiki/Dynamic_Host_Configuration_Protocol The DHCP employs a connectionless  ...

  6. 在腾讯云服务器上实现java web项目部署

    ----------------------------博主讲废话 几天前搞了一台体验七天的腾讯云服务器.之前已实现在新浪云下java web项目的部署,不需要自己搭建环境,比较简单,而且自 己也偷懒 ...

  7. Navigation

    Makedown常用语法 1.常用标题 # 代表h1(一级标题) ## 代表h2(二级标题) ### 代表h3(三级标题) #### 代表h4(四级标题) ##### 代表h5(五级标题) ##### ...

  8. tomcat 的 Pipeline 机制

    一.server.xml 在每个容器对象里面都有一个pipeline,Pipeline就像是每个容器的逻辑总线. <Host name="localhost" appBase ...

  9. docker 批量导出脚本

    用for 循环实现 docker imagesREPOSITORY                                               TAG                 ...

  10. 001-web基本程序搭建

    一.IDEA创建项目 1.基本项目创建 1.1.基本步骤 1.Create New Project [File→New→Project]→New Project 2.maven→group.artif ...