Проверка HTML для mutiple checkbox

Я пишу кусок кода как упражнение в HTML, который позволяет пользователю отмечать квадраты (код ниже упрощен, от 8 флажков до 2), а текст totalPrice должен показывать цену выбранный элемент.Проверка HTML для mutiple checkbox

<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:. Проверено")
петлю над результатом
дать общий идентификатор и установите значение

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/querySelectorВсе выбор этих элементов.
Использование для прохождения цикла через каждый флажок, добавляя их значение к общему числу, если оно установлено.
В этом примере я использовал 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

Этот ответ неверен, поскольку идентификаторы должны быть уникальными. Пожалуйста, см. Мой ответ для решения, используя лучшие практики. – mplungjan

Спасибо за исправление, теперь я редактировал идентификаторы для класса. – Hue

Но зачем беспокоиться? Ничего не добавлено в существующий ответ – mplungjan

Проверка HTML для mutiple checkbox

ответ

Смежные вопросы