<!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. std::condition_variable(复习)

    #include <iostream> // std::cout #include <thread> // std::thread #include <mutex> ...

  2. cocos2d-x设计模式发掘之三：管理者模式

      作者 firedragonpzy    地址:http://www.firedragonpzy.com.cn/index.php/archives/2103 想必读者一看这个题目又要纳闷了,神马又 ...

  3. Xamarin.Forms学习之位图(二)

    上篇文章分享了如何加载网络图片和PCL中的图片,所以今天继续分享关于如何加载平台的内嵌图片,在这之前说一下上篇文章开头的一个问题:为什么不能加载UWP项目,这是因为我升级了UWP的SDK,而Xamar ...

  4. SqlCommand对象-Transaction事务的使用

    using (SqlConnection connection = new SqlConnection(connStr)) { SqlCommand sqlcmd = new SqlCommand() ...

  5. 二、Nuxt初始化项目

    一.快速生成新项目 为了方便大家快速使用,Nuxt提供了一个starter模板,可以直接下载模板的压缩包,或者利用vue-cli来安装 1.压缩包链接:https://github.com/nuxt- ...

  6. javafx 普通弹框提示

    new Alert(Alert.AlertType.NONE, "xxx不存在", new ButtonType[]{ButtonType.CLOSE}).show();

  7. Hub,bridge,switch and router的区别

    首先说HUB,也就是集线器.它的作用可以简单的理解为将一些机器连接起来组成一个局域网.而交换机(又名交换式集线器)作用与集线器大体相同.但是两者在性能上有区别:集线器采用的式共享带宽的工作方式,而交换 ...

  8. 剑指offer 面试56题

    面试56题: 题目:数组中数字出现的次数 题:一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 解题思路: 方法一:异或运算,详见<剑指offer&g ...

  9. Android:日常学习笔记(8)———探究UI开发(2)

    Android:日常学习笔记(8)———探究UI开发(2) 对话框 说明: 对话框是提示用户作出决定或输入额外信息的小窗口. 对话框不会填充屏幕,通常用于需要用户采取行动才能继续执行的模式事件. 提示 ...

  10. Loadrunder之脚本篇——参数化取值策略

    参数取值选项 Select next row Update value on 以上两个选项是改变参数化取值的关键选项. Select next row包含如下选项: Sequential:顺序选择 R ...