javascript全選功能以及動態求和
效果圖1
圖2
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript"> function checkAll(all) { var count=0; // 取得所有要選中的商品的多選框 var allPro = document.querySelectorAll("#all_pro_div > input"); for (var i= 0;i < allPro.length;i++) { allPro[i].checked = all.checked; count = parseInt(allPro[i].value) + count; document.querySelector("#resultSpan").value=count; } }
function caculate(){ var count = 0; //空格表示只要在裡面的元素都可以，但是>表示兩者之間一定要是父子關係，中間隔一層都不行
var selectPro = document.querySelectorAll("#all_pro_div > input:checked"); for(var i=0;i<selectPro.length;i++){ /*var selectvalue = document.querySelector("input:checked").value; count = selectvalue + count;*/ var count = parseInt(selectPro[i].value)+count;
} document.querySelector("#resultSpan").value=count; /*非閉合標籤（起始標記<span>，結束標記</span>）可以使用innerHTML來賦值。如：div、span。 閉合標籤（<input /> 起始和結束都在一個標記內，不能再嵌入其他元素）要使用value來賦值：如input。*/ } </script> </head> <body> <input type="checkbox" name="all" id="all" onclick="checkAll(this);" > 全選<br/> <div id="all_pro_div"> <input type="checkbox" name="product" value="1000" onclick="caculate()"> 膝上型電腦 1000元 <br/> <input type="checkbox" name="product" value="2000" onclick="caculate()"> 膝上型電腦 2000元 <br/> <input type="checkbox" name="product" value="3000" onclick="caculate()"> 膝上型電腦 3000元 <br/> <input type="checkbox" name="product" value="4000" onclick="caculate()"> 膝上型電腦 4000元 <br/> <input type="checkbox" name="product" value="5000" onclick="caculate()"> 膝上型電腦 5000元 <br/> <input type="checkbox" name="product" value="6000" onclick="caculate()"> 膝上型電腦 6000元 <br/> </div> <input type="button" name="btncount" id="btncount" value="計算" onclick="caculate()"> 總計：<input type="span" name="resultSpan" id="resultSpan"> </body> </html>
總結：
- //空格表示只要在裡面的元素都可以，但是>表示兩者之間一定要是父子關係，中間隔一層都不
var selectPro = document.querySelectorAll("#all_pro_div > input:checked");
2./*非閉合標籤（起始標記<span>，結束標記</span>）可以使用innerHTML來賦值。如：div、span。
閉合標籤（<input /> 起始和結束都在一個標記內，不能再嵌入其他元素）要使用value來賦值：如input。*/
document.querySelector("#resultSpan").value=count;
<input type="span" name="resultSpan" id="resultSpan">
3.
這種情況程式碼：
function caculate(){
var count = 0;
//空格表示只要在裡面的元素都可以，但是>表示兩者之間一定要是父子關係，中間隔一層都不行
var selectPro = document.querySelectorAll("#all_pro_div > input:checked");
for(var i=0;i<selectPro.length;i++){
var selectvalue = document.querySelector("input:checked").value;
count = selectvalue + count;
//var count = parseInt(selectPro[i].value)+count;
console.log(count);
}
document.querySelector("#resultSpan").value=count;
}
原因：1.沒有進行型別轉換，是字串字串相加，結果是加長字串。2.沒有迴圈加結果，沒有加【i】時的值，永遠預設第一個
選中的值。
4.
- //空格表示只要在裡面的元素都可以，但是>表示兩者之間一定要是父子關係，中間隔一層都不
var selectPro = document.querySelectorAll("#all_pro_div > input:checked");
2./*非閉合標籤（起始標記<span>，結束標記</span>）可以使用innerHTML來賦值。如：div、span。
閉合標籤（<input /> 起始和結束都在一個標記內，不能再嵌入其他元素）要使用value來賦值：如input。*/
document.querySelector("#resultSpan").value=count;
<input type="span" name="resultSpan" id="resultSpan">
3.
這種情況程式碼：
function caculate(){
var count = 0;
//空格表示只要在裡面的元素都可以，但是>表示兩者之間一定要是父子關係，中間隔一層都不行
var selectPro = document.querySelectorAll("#all_pro_div > input:checked");
for(var i=0;i<selectPro.length;i++){
var selectvalue = document.querySelector("input:checked").value;
count = selectvalue + count;
//var count = parseInt(selectPro[i].value)+count;
console.log(count);
}
document.querySelector("#resultSpan").value=count;
}
原因：1.沒有進行型別轉換，是字串字串相加，結果是加長字串。2.沒有迴圈加結果，沒有加【i】時的值，永遠預設第一個
選中的值。
4.