思路：
1、获取被选中checkbox，通过checked属性的状态完成；
2、获取被选中的checkbox的value值；
3、求所有value的和sum；
4、定义span区域存储和sum；
 
代码如下：
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>表单组件：全选操作</title>
    <script type="text/javascript">
        function checkAll(index){
            var node = document.getElementsByName("all")[index];
            var items = document.getElementsByName("item");
            for(var i=0; i<items.length; i++){
                items[i].checked = node.checked;
            }
        }
    </script>
</head>
<body>
    <p></p>
    <input type="checkbox" name="all" onclick="checkAll(0)"/>全选<br/>
    <input type="checkbox" name="item" value="100"/>商品1<br/>
    <input type="checkbox" name="item" value="100"/>商品2<br/>
    <input type="checkbox" name="item" value="100"/>商品3<br/>
    <input type="checkbox" name="item" value="100"/>商品4<br/>
    <input type="checkbox" name="item" value="100"/>商品5<br/>
    <input type="checkbox" name="item" value="100"/>商品6<br/>
    <input type="checkbox" name="all" onclick="checkAll(1)"/>全选
</body>
</html>
 
代码如下：
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车显示选中购买物品的总金额</title>
    <script type="text/javascript">
        function checkAll(index){
            var node = document.getElementsByName("all")[index];
            var items = document.getElementsByName("item");
            for(var i=0; i<items.length; i++){
                items[i].checked = node.checked;
            }
        }
 
        function getSum(){
            var items = document.getElementsByName("item");
            var sum = 0;
            for(var i=0; i<items.length; i++){
                if(items[i].checked){
                    sum += parseInt(items[i].value);
                }
            }
            /*获取单个节点用getElementById
              获取节点数组用getElementsById
             */
            var spanNode = document.getElementById("sum");
            var str = sum + "元";
            spanNode.innerHTML = str.fontsize(8);
        }
    </script>
</head>
<body>
    <br/>
    <input type="checkbox" name="all" onclick="checkAll(0)"/>全选<br/>
    <input type="checkbox" name="item" value="105"/>商品1<br/>
    <input type="checkbox" name="item" value="214"/>商品2<br/>
    <input type="checkbox" name="item" value="113"/>商品3<br/>
    <input type="checkbox" name="item" value="77"/>商品4<br/>
    <input type="checkbox" name="item" value="91"/>商品5<br/>
    <input type="checkbox" name="item" value="536"/>商品6<br/>
    <input type="checkbox" name="all" onclick="checkAll(1)"/>全选<br/>
    <input type="button" value="显示总金额" onclick="getSum()"/><span id="sum"></span>
</body>
</html>
 

JS实战 · 复选框全选操作的更多相关文章

  1. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  2. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  4. FineReport——JS二次开发（复选框全选）

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

  5. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  7. toFixed（）精度丢失；复选框全选、取消

    一.精度丢失和重写toFixed()函数 1.重写toFixed() Number.prototype.toFixed = function(length){ var carry = 0; //存放进 ...

  8. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  9. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  10. js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...

随机推荐

  1. 【原创】内核ShellCode注入的一种方法

    标 题: [原创]内核ShellCode注入的一种方法 作 者: organic 时 间: 2013-05-04,04:34:08 链 接: http://bbs.pediy.com/showthre ...

  2. 一些关于 checkbox的前台 jquery 操作 记录

    $(function() { //页面载入函数 var partList = jQuery.parseJSON( '${KeyWordsList}'); $.each(partList,functio ...

  3. GIT版本管理工具

    原文:http://blog.csdn.net/ithomer/article/details/7527877 Git 是一个分布式版本控制工具,它的作者 Linus Torvalds 是这样给我们介 ...

  4. url中的特殊字符问题

    在 使用url进行参数传递时,经常会传递一些中文名(或含有特殊字符)的参数或URL地址,在后台处理时会发生转换错误.在有些传递页面使用GB2312, 而在接收页面使用UTF8,这样接收到的参数就可能会 ...

  5. 复利计算器（软件工程）及Junit测试———郭志豪

    计算:1.本金为100万,利率或者投资回报率为3%,投资年限为30年,那么,30年后所获得的利息收入:按复利计算公式来计算就是:1,000,000×(1+3%)^30 客户提出: 2.如果按照单利计算 ...

  6. [转] 前后端分离开发模式的 mock 平台预研

    引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都 ...

  7. BZOJ 2152 & 点分治

    Description: 只是打法法塔前测试一下板子 Code: /*================================= # Created time: 2016-04-20 14:3 ...

  8. Ctrip Mydream

    --我不知道以后如何,我不知道我做的事情能否持续,我只是希望有一天我真的在这条路上走下去了,我只希望去一次这里检验一下自己,我希望自己努力争取这个机会. .Net技术专家 岗位职责: 1.主导本领域的 ...

  9. WebRTC通信流程

    WebRTC是HTML5支持的重要特性之一,有了它,不再需要借助音视频相关的客户端,直接通过浏览器的Web页面就可以实现音视频对聊功能.而且WebRTC项目是开源的,我们可以借助WebRTC源码快速构 ...

  10. 二分图&网络流&最小割等问题的总结

    二分图基础: 最大匹配:匈牙利算法 最小点覆盖=最大匹配 最小边覆盖=总节点数-最大匹配 最大独立集=点数-最大匹配 网络流: 技巧: 1.拆点为边,即一个点有限制,可将其转化为边 BZOJ1066, ...