使用JS計算複選框的值

我有以下html代碼：我想計算與每個複選框相關的價格，並在點擊訂單（按鈕）後顯示在文本區域中。請幫忙！使用JS計算複選框的值

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

來源

2016-05-14 Sabawoon

你嘗試自己嗎？ – Areca

請首先嚐試在JS中編寫解決方案，然後讓我們幫助您調試它，如果仍然無法使用它。 – haltersweb

這通常不是它如何在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>

來源

2016-05-14 15:23:14 Patrick2607

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>

來源

2016-05-14 15:39:59 YogiDev

使用JS計算複選框的值

回答

相關問題