使用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计算复选框的值

回答

相关问题