JSを使用してチェックボックスの値を計算

Question

私は次のHTMLコードを持っています： 私は各チェックボックスに関連付けられた価格を計算し、私は注文（ボタン）をクリックした後にテキスト領域に表示します。 Plsヘルプ！

<div> 

    <form> 
    <fieldset > <legend>Resturant Menu:</legend> 

     <input type="checkbox" id = "menu" value="300"> 
     <label> Chicken-------------------------- 300 AFN</label> <br> 
     <input type="checkbox" id = "menu" value="200"> 
     <label> Chicken Baryani --------------- 200 AFN</label> <br> 
     <input type="checkbox" id = "menu" value="250"> 
     <label> Chicken Kabab ----------------- 250 AFN</label> <br> 
     <input type="checkbox" id = "menu" value="100"> 
     <label> Juice ----------------------------- 100 AFN</label> <br> 
     <input type="submit" id = "submit_btn" onclick = "calculate()"> 


    </fieldset> 

</form> 
</div> 

Answer 1

これは通常、StackOverflowでの動作ではありません。自分で修正する必要があります。しかし、私はここでは、HTML + Javascriptのソリューションですので、退屈です。

複数のIDを同じ名前で宣言し、代わりにクラスを使用することは悪い習慣です。あなたのコードを少し変更しました。別のフィールドにコードを表示したいので、フォームを使用する必要はありません。

var menuItems = document.getElementsByClassName('menuItem'); 
 
var orderButton = document.getElementById('order_btn'); 
 
var totalArea = document.getElementById('total'); 
 
var afn = 0; 
 

 
orderButton.addEventListener('click', function(e) { 
 
    e.preventDefault(); 
 
    for (var i = 0; i < menuItems.length; i++) { 
 
    if (menuItems[i].checked) { 
 
     afn += +menuItems[i].value; 
 
    } 
 
    } 
 
    totalArea.innerHTML = "Total: " + afn + " AFN"; 
 
    afn = 0; 
 
});

<div> 
 
    <fieldset> 
 
    <legend>Resturant Menu:</legend> 
 

 
    <input type="checkbox" class="menuItem" value="300"> 
 
    <label>Chicken-------------------------- 300 AFN</label> 
 
    <br> 
 
    <input type="checkbox" class="menuItem" value="200"> 
 
    <label>Chicken Baryani --------------- 200 AFN</label> 
 
    <br> 
 
    <input type="checkbox" class="menuItem" value="250"> 
 
    <label>Chicken Kabab ----------------- 250 AFN</label> 
 
    <br> 
 
    <input type="checkbox" class="menuItem" value="100"> 
 
    <label>Juice ----------------------------- 100 AFN</label> 
 
    <br> 
 
    <button id="order_btn">Order</button> 
 
    </fieldset> 
 
    <p id="total">Total: 0 AFN</p> 
 
</div>

Answer 2

function calculate(){ 
 
      var allMenuItem = $('#menuItem input[type=checkbox]'); 
 
      var totalPrice = 0; 
 
      $.each(allMenuItem, function(key, element){ 
 
       if($(this).is(":checked")){ 
 
        totalPrice += parseFloat($(this).val()); 
 
       } 
 
      }); 
 

 
      alert("You order price is: "+ totalPrice + " Rs"); 
 
     } 
 
    </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<form> 
 
     <fieldset > <legend>Resturant Menu:</legend> 
 
      <div id="menuItem"> 
 
      <input type="checkbox" id = "menu" value="300"> 
 
      <label> Chicken-------------------------- 300 AFN</label> <br> 
 
      <input type="checkbox" id = "menu" value="200"> 
 
      <label> Chicken Baryani --------------- 200 AFN</label> <br> 
 
      <input type="checkbox" id = "menu" value="250"> 
 
      <label> Chicken Kabab ----------------- 250 AFN</label> <br> 
 
      <input type="checkbox" id = "menu" value="100"> 
 
      <label> Juice ----------------------------- 100 AFN</label> <br> 
 
      <input type="button" value="Order" id = "submit_btn" onclick = "calculate()"> 
 
      </div> 
 
     </fieldset> 
 

 
    </form>