JavaScript-商品結算（全選操作，反選操作）
阿新 • • 發佈：2018-12-10
複選框如果要選中，設定checked=true，取消設定checked=false
全選：通過name屬性得到上面所有的複選框物件，遍歷集合，將每一個元素的checked設定為true。
反選：原來選中的設定false，原來沒選的設定為true。
- 頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>商品價格列表</h3> <input type="checkbox" name="item" value="300" /> 運動鞋<br /> <input type="checkbox" name="item" value="200" /> 板鞋<br /> <input type="checkbox" name="item" value="3000" /> 膝上型電腦<br /> <input type="checkbox" name="item" value="400" /> 手錶<br /> <input type="checkbox" name="item" value="150" /> 廚具<br /> <hr/> <input type="checkbox" id="all" onclick="selectAll()" />全選/全不選 <input type="button" id="reverse" onclick="reverseSelect()" value=" 反 選 "/> <input type="button" value=" 結 賬 " onclick="total()" /> <span id="result"></span> </body> </html>
JavaScript程式碼：
<script> /*點選全選和全不選的按鈕 其他的複選框 應該跟全選框一致*/ function selectAll(){ //點選全選的狀態. //1.獲得全選和全不選的狀態值 通過checked屬性 checked="checked" ==>>html語法 var allCkb = document.getElementById("all"); //checked屬性是boolean型別 ==>> javascript語法 //alert(allCkb.checked); //2.獲得其他複選框 var otherCkb = document.getElementsByName("item"); for(var i = 0 ; i<otherCkb.length ; i++){ //全選框的狀態賦值給每一個複選框 otherCkb[i].checked = allCkb.checked; } } //點選事件 function reverseSelect(){ //獲得其他複選框即可 var otherCkb = document.getElementsByName("item"); //遍歷 for(var i = 0 ; i<otherCkb.length ; i++){ otherCkb[i].checked = !otherCkb[i].checked; } } //點選結賬 function total(){ //1.獲得所有複選框 var otherCkb = document.getElementsByName("item"); var totalPrice = 0 ; //2.迴圈判斷哪些被選中 for(var i=0;i<otherCkb.length ; i++){ if(otherCkb[i].checked ==true){ //3.選中的價格相加 totalPrice+= parseInt( otherCkb[i].value ); } } alert(totalPrice); } </script>