如圖:
全選按鈕的實現為:
<input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="button" value="获取总金额" onclick="getSum()" /> <span id="sum"></span>
最後的span標籤是用來存放顯示總金額的區域。
實作兩個「全選」功能的程式碼是:
function checkAll() { //var allNode = document.getElementsByName("all")[0]; //获取被点击的元素 var allNode = event.srcElement; var item = document.getElementsByName("item"); for(var x=0;x<item.length;x++) { item[x].checked = allNode.checked; } }
event.srcElement實作了回應事件按鈕的取得。
for循環將每個多選框修改checked屬性。
計算總金額的方法為:
function getSum() { var item = document.getElementsByName("item"); var sum = 0; for(var x=0;x<item.length;x++) { if(item[x].checked) { sum+=parseInt(item[x].value); } } var spanNode = document.getElementById("sum"); spanNode.innerHTML = (sum+"元").fontsize(7); }
將所有被選取的複選框的value值加起來。
更多js實現簡單的購物車有圖有代碼相關文章請關注PHP中文網!
相關文章:
jQuery基於json與cookie實現購物車的方法蟎php 實作簡單加入購物車的圖文程式碼詳細介紹