zoukankan      html  css  js  c++  java
  • JS实战 · 复选框全选操作

    思路:
    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>
     
  • 相关阅读:
    [LeetCode] 146. LRU Cache(LRU 缓存)
    [LeetCode] 55. Jump Game(跳跃游戏)
    [LeetCode] 33. Search in Rotated Sorted Array(搜索旋转有序数组)
    [LeetCode] 19. Remove Nth Node From End of List(从单链表中移除倒数第 n 个节点)
    [LeetCode] 79. Word Search(单词查找)
    [LeetCode] 322. Coin Change(换硬币)
    [LeetCode] 34. Find First and Last Position of Elements in Sorted Array(在有序数组中寻找某个元素第一次和最后一次出现的位置)
    第04组 Alpha冲刺(2/6)
    第04组 Alpha冲刺(1/6)
    第04组 团队Git现场编程实战
  • 原文地址:https://www.cnblogs.com/panweiwei/p/6158710.html
Copyright © 2011-2022 走看看