<!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. 3993: [SDOI2015]星际战争

    3993: [SDOI2015]星际战争 Time Limit: 10 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 1244  Solved: ...

  2. JS实现当鼠标移动到图片上时，时图片旋转

    <div id="container" style="width:500px;height:400px;position:relative;margin:0 aut ...

  3. echarts+thinkphp 学习写的第一个程序

    一.前台 建个名为map.html,代码如下. <!doctype html><html lang="en"><head> <meta c ...

  4. 巨蟒django之CRM2 展示客户列表&&分页

    1.展示客户列表 点击画红线中的views,进入下列界面 路径的查找顺序:应该是先查找外层的templates里边的html,然后查找app里边的templates 另一个会按照app的顺序进行寻找, ...

  5. CSS3选择器:nth-child与:nth-of-type区别

    一.:nth-child 1.1 说明 :nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素的类型.n可以是数字.关键词或公式. 注意:如果第N个子元素与选择的元素类型不同则样式无 ...

  6. 使用QFileInfo类获取文件信息（在NTFS文件系统上，出于性能考虑，文件的所有权和权限检查在默认情况下是被禁用的，通过qt_ntfs_permission_lookup开启和操作。absolutePath()必须查询文件系统。而path()函数，可以直接作用于文件名本身，所以，path() 函数的运行会更快）

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Amnes1a/article/details/65444966QFileInfo类为我们提供了系统无 ...

  7. Sprｉngboot 错误信息：Required String parameter 'loginname' is not present 引发的研究

    @PostMapping("/reg/change")public CommonSdo change( @RequestParam(value = "oldPasswor ...

  8. Java CLASSPATH

    @1:CLASSPATH用途: #1:给import指路 -- import后面的包名(转换为相应的路径后)与CLASSPATH中的各项相连接. 然后解释器从这些路径(前面连接之后的结果)中查找程序中 ...

  9. Ajax：js自执行函数、jsonp、cros

    一.js自执行函数 #(function(){alert(1);})(); (function(){ alert(1); } )(); 二.javascript同源策略 1. 什么是同源策略 理解跨域 ...

  10. Python基础知识补充（重要）-作用域、特殊语法

    Python作用域 python代码内部块如if语句内声明变量,在if代码段后在调用此变量并未报如“undefinded name"此类错误,例子如下: if 1 == 1: name = ...