1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6.  
  7. <script type="text/javascript">
  8.  
  9. function getSum()
  10. {
  11. var itemNodes = document.getElementsByName("item");
  12. var sum = 0;
  13. for(var i=0; i<itemNodes.length; i++)
  14. {
  15. if(itemNodes[i].checked)
  16. {
  17. sum += parseInt(itemNodes[i].value);
  18. }
  19. }
  20.  
  21. var spanNode = document.getElementById("spanId");
  22. var str = sum + "元";
  23. spanNode.innerHTML = str.fontsize(10);
  24. }
  25.  
  26. function checkAll(checkallNode)
  27. {
  28. var itemNodes = document.getElementsByName("item");
  29. for(var i=0; i<itemNodes.length; i++)
  30. {
  31. itemNodes[i].checked = checkallNode.checked;
  32. }
  33. }
  34.  
  35. </script>
  36.  
  37. </head>
  38.  
  39. <body>
  40. <input type="checkbox" name="all" onclick="checkAll(this)"/>全选<br />
  41. <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br />
  42. <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br />
  43. <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br />
  44. <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br />
  45. <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br />
  46. <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br />
  47. <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br />
  48. <input type="button" value="计算金额" onclick="getSum(this)"/> <span id="spanId"></span>
  49. </body>
  50. </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. 封装AJax实现JSON前台与后台交互

    实践技术点:1.AJax自定义封装 2.后台序列化与反序列化JSON 3.客户端解析JSON字符串,处理DOM 实现代码如下: 1.JS脚本代码:   1 /*** NOTE:AJAX处理JS TIM ...

  2. Cookies with curl the command line tool

    w https://curl.haxx.se/docs/http-cookies.html curl has a full cookie "engine" built in. If ...

  3. 自定义admin

    平时我们用的django自带admin,怎么评价呢?一个字简陋,而且也人性化,如下图,首先只显示数据对象,如果要查看详细还有点进去,其次不能对自己想要的数据进行刷选 我们的期望是:数据如excel显示 ...

  4. 为什么一定要调用 setlocale 呢? 因为在 C/C++ 语言标准中定义了其运行时的字符集环境为 "C" ,也就是 ASCII 字符集的一个子集。使用setlocal改变整个应用程序的字符集编码方式(wcstombs使用前要设置 setlocale (LC_ALL, "chs"); )

    setlocale 配置地域化信息. 语法: string setlocale(string category, string locale); 返回值: 字符串 函数种类: 操作系统与环境   内容 ...

  5. 【22,23节】Django的GET和POST属性笔记

    COOKIES:一个标准的python字典对象,包含所有cookies,键和值都为字符串session:一个即能读又能写的类似字典对象,表示当前的会话,只有当django启用会话的支持时才可用 一键多 ...

  6. random生成六位随机数验证码

    需求: 生成一个六位随机验证码 # 傻瓜式纯数字实现import randomran = random.randint(100000, 999999) # ran = random.randrange ...

  7. 2015.7.8(千股跌停!做T不应当只做中色,中国软件)

    2015.7.81.今天开盘所有的股票全部跌停,真是一大奇观! 今天中色股份和以往不同买卖盘为正! 但是中色的爬升比较慢,价位始终没有高过昨天的收盘价————这种情况下是否应该做T呢? 2.做T不应当 ...

  8. VS 无法调试 IIS

    用附加的方式断点无效时.   解决方案: 一.VS设置的  .Net版本 与 IIS应用程序池的版本  不一致.   操作步骤: 1. 在VS-> 项目属性, 配置 自定义Web服务器 , 这里 ...

  9. volume不能挂载mysql permission denied问题

    参考 把玩jenkins docker镜像遇到的volume权限问题 docker run -d -v /root/jenkins:/var/jenkins_home -u 0 -P --name j ...

  10. 09_Hadoop启动或停止的三种方式及启动脚本

    1.Hadoop启动或停止 1)第一种方式 分别启动 HDFS 和 MapReduce,命令如下: 启动: $ start-dfs.sh $ start-mapred.sh 停止: $ stop-ma ...