檢查多個複選框的HTML檢查

我在HTML中允許用戶勾選框（下面的代碼被簡化了，從8複選框到2），並且文本totalPrice應該顯示價格選擇的項目。檢查多個複選框的HTML檢查

<script type='text/javascript'> 
function f(){ 
    if(document.form1.nano1Gb.checked == true) 
    document.form1.totalPrice.value = document.form1.priceNano1Gb.value 
    if(document.form1.nano4Gb.checked == true) 
    document.form1.totalPrice.value = document.form1.priceNano4Gb.value 
    if(document.form1.nano1Gb.checked == true && document.form1.nano4Gb.checked == true) 
    document.form1.totalPrice.value = parseInt(document.form1.priceNano1Gb.value) + parseInt(document.form1.priceNano4Gb.value) 
} 
</script> 
<body> 
<form name='form1'> 
<p> 
<input type='checkbox' name='nano1Gb' onclick=f(); /> 
<input type='text' value='Nano 1GB'> 
<input type='text' name='priceNano1Gb' value='90'</p> 

<p> 
<input type='checkbox' name='nano4Gb' onclick=f(); /> 
<input type='text' value='Nano 4 GBb'> 
<input type='text' name='priceNano4Gb' value='155'</p> 

<p><input type='text' name="totalPrice" placeholder="Total Price"></p>

這個工程有兩個元素，但有8個元素，似乎對我來說非常低效的巨大數百條件檢查每單箱共計還有什麼得到遏制。我怎樣才能更好地編碼？謝謝！

來源

2016-11-29 Pete

給他們上課。
使用document.querySelectorAll（「yourclassname：檢查」）
遍歷結果
得到總的ID和設定的值

window.onload = function() { 
 
    var checks = document.querySelectorAll(".chk"); 
 
    for (var i = 0; i < checks.length; i++) { 
 
    checks[i].onclick = function() { 
 
     total(); 
 
    } 
 
    } 
 
} 
 

 
function getNext(next) { 
 
    do next = next.nextSibling; 
 
    while (next && next.nodeType !== 1); 
 
    return next; 
 
} 
 

 
function total() { 
 
    var total = 0; 
 
    var checks = document.querySelectorAll(".chk:checked"); 
 
    for (var i = 0; i < checks.length; i++) { 
 
    var nameField = getNext(checks[i]); 
 
    var priceField = getNext(nameField); 
 
    total += parseInt(priceField.value, 10); // or parsefloat(priceField.value) if decimal 
 
    } 
 
    document.querySelector("#total").value = total; // or total.toFixed(2) if decimal 
 
}

<form name='form1'> 
 
    <p> 
 
    <input class="chk" type='checkbox' name='nano1Gb' /> 
 
    <input type='text' value='Nano 1GB'> 
 
    <input type='text' name='priceNano1Gb' value='90' /> 
 
    </p> 
 

 
    <p> 
 
    <input class="chk" type='checkbox' name='nano4Gb' /> 
 
    <input type='text' value='Nano 4 GBb'> 
 
    <input type='text' name='priceNano4Gb' value='155' /> 
 
    </p> 
 

 
    <p> 
 
    <input id="total" type='text' name="totalPrice" placeholder="Total Price"> 
 
    </p> 
 
</form>

來源

2016-11-29 14:28:26 mplungjan

給的複選框，價值和總輸入要素一類。
使用querySelector/querySelectorAll來選擇這些元素。
使用循環遍歷每個複選框將其值添加到總數（如果選中）。
在這個例子中，我使用了5個複選框。

<script type='text/javascript'> 
function f(){ 
     var val = document.querySelectorAll(".value"); 
     var check = document.querySelectorAll(".checkbox"); 
     var allSum = document.getElementByClassName(".total"); 
     var total = 0; 
     for (var i=0; i<check.length; i++) { 
     if(check[i].checked === true) { 
      total += parseInt(val[i].value); 
      allSum.value = total;   
      } 
     } 
} 
</script> 
</head> 
<body> 
<form name='form1'> 
<p> 
<input class="checkbox" type='checkbox' name='nano1Gb' onclick=f(); /> 
<input type='text' value='Nano 1GB'> 
<input class="value" type='text' name='priceNano1Gb' value='90'</p> 

<p> 
<input class="checkbox" type='checkbox' name='nano2Gb' onclick=f(); /> 
<input type='text' value='Nano 2 GB'> 
<input class="value" type='text' name='priceNano2Gb' value='115'</p> 

<p> 
<input class="checkbox" type='checkbox' name='nano3Gb' onclick=f(); /> 
<input type='text' value='Nano 3 GB'> 
<input class="value" type='text' name='priceNano3Gb' value='130'</p> 


<p> 
<input class="checkbox" type='checkbox' name='nano4Gb' onclick=f(); /> 
<input type='text' value='Nano 4 GB'> 
<input class="value" type='text' name='priceNano4Gb' value='155'</p> 

<p> 
<input class="checkbox" type='checkbox' name='nano5Gb' onclick=f(); /> 
<input type='text' value='Nano 5 GB'> 
<input class="value" type='text' name='priceNano5Gb' value='170'</p> 

<p><input class="total" type='text' name="totalPrice" placeholder="Total Price"></p> 
</body> 
</html>

來源

2016-11-29 15:16:38 Hue

此答案不正確，因爲ID必須是唯一的。請參閱我的答案，瞭解使用最佳做法的解決方案。 – mplungjan

感謝您的糾正，我現在編輯了id課。 – Hue

但爲什麼要麻煩？沒有添加到現有的答案 – mplungjan

檢查多個複選框的HTML檢查

回答

相關問題