複数チェックボックスを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：
値を合計IDを与え、結果セット上
ループ（ "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/querySelectorAllを使用します。
forループを使用して、各チェックボックスをトラバースし、チェックされている場合は合計にその値を追加します。
この例では、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でチェックする

答えて

関連する問題