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;
}