js選中checkbox核取方塊既可以實現商品價格計算

antzone發表於2017-04-08
JS

本章節分享一段程式碼例項，它模擬實現了類似於商城計算商品價格綜合的功能。

當選中或者取消選中核取方塊的時候，能夠實現商品價格計算功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
body,div,p{
  margin:0;
  padding:0;
  font-size:14px;
}
#sumMoney{
  font-size:26px;
  font-weight:bold;
  color:Red;
}
</style>
<script type="text/javascript">
//全選和全清
function checkAll(ev){
  var chkItems=document.getElementsByName("item");
  var target=ev.srcElement||ev.target;
  for(var index=0;index<chkItems.length;index++){
         
    chkItems[index].checked=target.checked;
  }
  calculateMoney();
}
//統計所有選中的產品金額
function calculateMoney(){
  var sum=0;
  var chkItems=document.getElementsByName("item");
  for(var index=0;index<chkItems.length;index++){
    if(chkItems[index].checked){
      sum+=parseInt(chkItems[index].value);
    }
  }
  var sumMoneyObj=document.getElementById("sumMoney");
  sumMoneyObj.innerHTML="總金額:"+sum;
}
  
//給每個產品核取方塊加上自動統計功能
function iniEvent(){
  var chkItems=document.getElementsByName("item");
  for (var index=0;index<chkItems.length;index++){
    chkItems[index].onclick=calculateMoney;
  }      
}
window.onload=function(){
  iniEvent();
  var chkAll=document.getElementById("chkAll");
  chkAll.onclick=function(ev){
        var ev=window.event||ev;
    checkAll(ev);
  }
}
</script>
</head>
<body>
<div id="divMain">
  <p><input type="checkbox" id="chkAll" name="全選"/>全選</p>
  <p><input type="checkbox" name="item" value="2999" />div css教程</p>
  <p><input type="checkbox" name="item" value="2256" />javascript教程</p>
  <p><input type="checkbox" name="item" value="2799" />jquery教程</p>
  <p><input type="checkbox" name="item" value="2008" />正規表示式教程</p>
  <p><input type="checkbox" name="item" value="2598" />nodejs教程</p>
  <p><input type="checkbox" name="item" value="1877" />HTML5教程</p>
  <p><input type="checkbox" name="item" value="2398" />ajax教程</p>
  <p><input type="checkbox" name="item" value="1999" />螞蟻部落</p>
  <p><span id="sumMoney">總金額:</span></p>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function checkAll(ev){}，此函式實現了核取方塊的全選和全部選效果，引數是事件物件。

（2）.var chkItems=document.getElementsByName("item")，獲取name屬性值為item的元素物件集合。

（3）.var target=ev.srcElement||ev.target，獲取事件源物件，其實在這裡就是最頂部的那個核取方塊。

（4）.for(var index=0;index<chkItems.length;index++){

  chkItems[index].checked=target.checked;

}，通過for迴圈遍歷每一個元素，並且核取方塊的checked屬性值設定為最頂部的核取方塊的checked屬性值。

（5）.calculateMoney(){},此函式實現計算金錢總額的功能。

（6）.var sum=0，宣告一個變數並賦初值為0，用來儲存總金錢數。

（7）.var chkItems=document.getElementsByName("item")，獲取name屬性值為item的元素集合。

（8）.for(var index=0;index<chkItems.length;index++){

  if(chkItems[index].checked){

    sum+=parseInt(chkItems[index].value);

  }

}，遍歷集合中的每一個元素。

判斷集合中的元素哪一個是被選中的，如果被選中就將金額數累加。

（9）.var sumMoneyObj=document.getElementById("sumMoney")，獲取指定的元素物件。

（10）.sumMoneyObj.innerHTML="總金額:"+sum，顯示金額數。

（11）.function iniEvent(){}，進行一些初始化操作，比如事件處理函式的註冊。

（12）.for (var index=0;index<chkItems.length;index++){

  chkItems[index].onclick=calculateMoney;

} ，批量註冊事件處理函式。

二.相關閱讀:

（1）.document.getElementsByName()可以參閱document.getElementsByName()方法一章節。

（2）.srcElement屬性可以參閱javascript event.srcElement一章節。

（3）.target屬性可以參閱javascript event.target一章節。

（4）.parseInt()方法可以參閱javascript parseInt()一章節。

（5）.window.event||ev可以參閱var ev=window.event||ev的作用是什麼一章節。

相關文章