1. 程式人生 > >JS計算清單總和(全選/不全選事件)

JS計算清單總和(全選/不全選事件)

HTML:

<div class="shop">商品列表</div>
        <div class="container">
            <input type="checkbox" id="allok" onclick="checkall()"/>全選/全不選<br />
            <input type="checkbox" id="oppsite" onclick="checkoppo()"/>反選<br />
            <input type="checkbox" name="item" value="4000" />膝上型電腦<br />
            <input type="checkbox" name="item" value="2000" />書本<br />
            <input type="checkbox" name="item" value="100" />鋼筆<br />
            <input type="checkbox" name="item" value="20" />電磁爐<br />
            <input type="checkbox" name="item" value="30" />電視機<br />
            <input type="button" name="" value="總金額" onclick="getsum()"/>
            <span id="allsum"></span>
        </div>

JS全選/全不選:

function checkall(){
                var allok=document.getElementById("allok");
                var item=document.getElementsByName("item");
                if(allok.checked)
                {
                    for(var j=0;j<item.length;j++){
                        item[j].checked=true;
                    }
                }
                else{
                    for(var j=0;j<item.length;j++){
                        item[j].checked=false;
                    }
                }
            }

JS反選功能:

    function checkoppo(){
            var item=document.getElementsByName("item");
            for(k=0;k<item.length;k++){
                if(item[k].checked){
                    item[k].checked=false;
                }
                else{
                    item[k].checked=true;
                }
            }
        }

JS計算總和:

function getsum(){
                var itemsum=document.getElementsByName("item");
                var sum=0;
                for(var i=0;i<itemsum.length;i++){
                    if(itemsum[i].checked==true)
                    {
                        sum+=parseFloat(itemsum[i].value);
                    }
                }
                var allsum=document.getElementById("allsum");
                allsum.innerHTML=sum;
            }