javaseday37补充2(全选checkedbox 获取box中的值并输出)

最新推荐文章于 2024-04-24 10:14:22 发布

转载最新推荐文章于 2024-04-24 10:14:22 发布 · 557 阅读

javase中的js和html(web) 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的功能：通过点击复选框选择商品，并实时计算所选商品的总价。该功能支持全选操作，并在按钮点击时显示总价。

<script type="text/javascript">
    function getSum()
    {
        /*
            获取所有的名称为item的复选框
            判断checked状态 为true 表示被选中 获取该节点的value进行累加

        */
        var sum = 0;
        var collItemNodes = document.getElementsByName("item");
        for(var x= 0;x<collItemNodes.length;x++)
        {
            if(collItemNodes[x].checked)
            {
                sum += parseInt(collItemNodes[x].value);//拿值的都是字符串 parseInt是必须的 
            }   
        }
        var str_sum = sum+"元";
        document.getElementById("span").innerHTML=str_sum.fontcolor("green");

    }
    //全选
    function checkAll(node)
    {
        //将 全选box的checked状态 赋值给所有的itembox的checked
        var collItemNodes = document.getElementsByName("item");
        for(var x= 0;x<collItemNodes.length;x++)
        {
            collItemNodes[x].checked= node.checked;
        }
    }
</script>
<input type="checkbox" name="allitem" onclick="checkAll(this)"/>全选<br />
<input type="checkbox" name="item" value="100"/> 电脑 100元<br/>
<input type="checkbox" name="item" value="100"/> 电脑 100元<br/>
<input type="checkbox" name="item" value="100"/> 电脑 100元<br/>
<input type="checkbox" name="item" value="100"/> 电脑 100元<br/>
<input type="checkbox" name="item" value="100"/> 电脑 100元<br/>
<input type="checkbox" name="item" value="100"/> 电脑 100元<br/>
<input type="checkbox" name="item" value="100"/> 电脑 100元<br/>
<input type="checkbox" name="item" value="100"/> 电脑 100元<br/>
<input type="checkbox" name="allitem" onclick="checkAll(this)"/>全选<br/>
<input type="button" value="总金额"  onclick="getSum()"/><span id="span"></span>
</body>