HTML-Prüfung für multiple Kontrollkästchen

Ich schreibe ein Stück Code als eine Übung in HTML, die dem Benutzer ermöglicht, Kästchen ankreuzen (der Code unten ist vereinfacht, von 8 Kontrollkästchen bis 2) und der Text Gesamtpreis sollte den Preis von zeigen der ausgewählte Artikel HTML-Prüfung für multiple Kontrollkästchen

<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>

Dies funktioniert mit zwei Elementen, aber mit 8 Elementen, wie es scheint sehr ineffizient für mich große Hunderte von Bedingungen, die jedes einzelnes Kästchens und insgesamt, was sonst noch geprüft wurde. Wie kann ich das besser programmieren? Vielen Dank!

Quelle

2016-11-29 Pete

Geben Sie ihnen eine Klasse.
Verwenden document.querySelectorAll ("yourclassname. Checked")
Schleife über Ergebnis
insgesamt eine ID geben und den Wert

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>

Quelle

2016-11-29 14:28:26 mplungjan

Gib das Ankreuzfeld , Wert und Gesamteingabeelemente eine Klasse.
Verwenden Sie querySelector/querySelectorAll, um diese Elemente auszuwählen.
Verwendung von for-Schleife-Traversierung durch jede Checkbox, deren Wert der Summe hinzugefügt wird, wenn diese Option aktiviert ist.
In diesem Beispiel habe ich 5 Checkboxen verwendet.

<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>

Quelle

2016-11-29 15:16:38 Hue

Diese Antwort ist falsch, da IDs eindeutig sein müssen. Bitte sehen Sie meine Antwort für eine Lösung mit Best Practices. – mplungjan

Danke für die Korrektur, ich habe jetzt IDs zur Klasse bearbeitet. – Hue

Aber warum stören? Der vorhandenen Antwort wurde nichts hinzugefügt – mplungjan

HTML-Prüfung für multiple Kontrollkästchen

Antwort

Verwandte Themen