时间戳

首页 > 解决方案 > 您如何选择所有已检查的项目并将所有已检查项目的价格相加以获得总数？

javascript - 您如何选择所有已检查的项目并将所有已检查项目的价格相加以获得总数？

问题描述

您如何使用 javascript 来隔离 html 文件中的所有选中项。
我想看看检查了什么，这告诉我从菜单中选择了哪些项目。
菜单上有所检查项目的价格。
您如何访问在具有价格的 javascript 数组中选中的那些项目。
然后我想总结在 html 菜单上检查的所有项目的价格。
差一点就收到码了。我想使用 a forEach()，然后隔离用它检查的项目 s id。
我考虑过使用split('Checkbox'). 但是，我当时摸不着头脑，你如何让它工作以使 menuItem 数组价格相加并得到总计。 total += menu.price.

var menuItems = 
  [ { itemName: 'salad',        price: 13.95 } 
  , { itemName: 'pancakes',     price:  8.95 } 
  , { itemName: 'omlette',      price:  8.95 } 
  , { itemName: 'croissant',    price:  5.95 } 
  , { itemName: 'muffin',       price:  8.95 } 
  , { itemName: 'cheeseburger', price: 10.95 } 
  , { itemName: 'teriyaki',     price: 12.95 } 
  , { itemName: 'soup',         price: 11.95 } 
  , { itemName: 'coffee',       price:  1.95 } 
  , { itemName: 'tea',          price: 11.95 } 
  , { itemName: 'beer',         price:  5.95 } 
  , { itemName: 'milk',         price:  3.95 } 
  ] 
var total = 0;

document.querySelectorAll("input[type='checkbox']")
  .forEach(checkbox => {
    checkbox.addEventListener('click', function(event) { 
    if (event.target.checked) {
      console.log(event.target.checked);
      console.log('total ' + total);
    }   
  })         
});

<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>
<title>MENU</title>
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/menu.css" >
</head>
<body>

<div class="name">
  <h1>JOE'S FAMILY DINER</h1>
</div>

<table style="width:100%">
  <tr>
    <th>BreakFast</th>
    <th>Lunch</th> 
    <th>Beverages</th>
  </tr>
  <tr>
    <td>
      <label for="Pancakes"> <b>Blueberry Pancakes</b> </label>
      <input type="checkbox" id="panCheckbox" name="pancakes"/>
      $8.95
    </td>
    <td>
      <label for="burger"> <b>Cheeseburger</b> </label>
      <input type="checkbox" id="burg" name="burger"/>
      $10.95
    </td>
    <td>
      <label for="Coffee"> <b>Black Coffee:</b> </label>
      <input type="checkbox" id="cofCheckbox" name="coffee" />
      $1.95
    </td>
  </tr>
  <tr>
    <td>
      <label for="Omelette"><b>Vegetable Omelette</b></label>
      <input type="checkbox" id="omlCheckbox"  name="omlette"/>
      $8.95
    </td>
    <td>
      <label for="Wrap"> <b>Teriyaki Wrap:</b></label>
      <input type="checkbox" id="rapCheckbox" name="wrap" />
      $12.95
    </td>
    <td>
      <label for="Tea"><b>Green Tea:</b></label>
      <input type="checkbox"id="teCheckbox"  name="tea" />
      $11.95
    </td>
  </tr>
  <tr>
    <td>
      <label for="Croissant"> <b>Croissant:</b> </label>
      <input type="checkbox" id="crosCheckbox" name="croissant"/>
      $5.95
    </td>
    <td>
      <label for="salad"> <b>Ceasar Salad:</b> </label>
      <input type="checkbox" id="salCheckbox" name="sald" />
      $13.95
    </td>
    <td>
      <label for="beer"> <b>Corona Beer 12 oz:</b> </label>
      <input type="checkbox" id="BerCheckbox" name="Beer" />
      $5.95
    </td>
  </tr>
  <tr>
    <td> 
      <label for="Muffin"><b>Blueberry Muffin</b> </label>
      <input type="checkbox" id="MufCheckbox"  name="muffin"/>
      $8.95
    </td>
    <td>
      <label for="soup"> <b>Tomato Soup:</b> </label>
      <input type="checkbox" id="souCheckbox" name="soup" />
      $11.95
    </td>
    <td>
      <label for="Milk"> <b>Chocolate Milk:</b> </label>
      <input type="checkbox" id="milCheckbox" name="milk" />
      $3.95
    </td>
  </tr>
</table>
<div>
  <form>
    <input type="submit" value="Submit" id="sub">
    <input type="reset" value="Reset">
  </form>
</div>  
<div style="margin-top: 10px;">
  <button type="button">Total Amount</button>
</div>
        
<script type="text/javascript" src="/js/menu.js"></script>
</body>
</html>

标签： javascriptarrayssplitsumnumbers

解决方案

最简单的方法是使用FormData它只获取表单中选中的元素。

这也意味着您的 html 必须为这项工作重新排列

因为这里提出的答案目前完全被忽视了如何使用这里的表格，所以我会发现这是一个可以接受的答案

const menuItems = 
  { BreakFast :
    [ { itemName: 'pancakes',  price: 8.95, label: 'Blueberry Pancakes' }
    , { itemName: 'omlette',   price: 8.95, label: 'Vegetable Omelette' }
    , { itemName: 'croissant', price: 5.95, label: 'Croissant'          }
    , { itemName: 'muffin',    price: 8.95, label: 'Blueberry Muffin'   }
    ]
  , Lunch :
    [ { itemName: 'cheeseburger', price: 10.95, label: 'Cheeseburger'  }
    , { itemName: 'teriyaki',     price: 12.95, label: 'Teriyaki Wrap' }
    , { itemName: 'salad',        price: 13.95, label: 'Ceasar Salad'  }
    , { itemName: 'soup',         price: 11.95, label: 'Tomato Soup'   }
    ]
  , Beverages :
    [ { itemName: 'coffee', price:  1.95, label: 'Black Coffee'      }
    , { itemName: 'tea',    price: 11.95, label: 'Green Tea'         }
    , { itemName: 'beer',   price:  5.95, label: 'Corona Beer 12 oz' }
    , { itemName: 'milk',   price:  3.95, label: 'Chocolate Milk'    }
    ]
  }

const
  myForm = document.querySelector('#my-form-id')
, total  = document.querySelector('#total > em')

for (let menu in menuItems) // build the menu
  {
  let menuPart = document.createElement('fieldset') 
  menuPart.innerHTML = `<legend>${menu}</legend>`
  menuItems[menu].forEach(item=>
    {
    menuPart.innerHTML += `
        <label>
          <b>${item.label}</b>
          <input type="checkbox" name="${item.itemName}" value="${item.price}">
          <em>$ ${item.price}</em>
        </label>`
    })
  myForm.querySelector('.cols-3-parts').appendChild(menuPart)
  }
myForm.onsubmit = e =>
  {
  e.preventDefault() // disable submit while testing

  let inputJSON = Array.from(new FormData(myForm))
    .reduce((r,[name,value])=>{ r[name]= isNaN(value) ? value : Number(value); return r} ,{}) 
  console.log( JSON.stringify( inputJSON ))
  setTimeout(console.clear, 2000);
  }
myForm.onreset = e =>
  {
  total.textContent = '0.00'
  }
myForm.oninput = e =>
  {
  let  totalVal = 0;
  Array.from(new FormData(myForm))
    .forEach(([name,value])=> totalVal += isNaN(value) ? 0 : Number(value) ) 
    
  total.textContent = totalVal.toFixed(2)
  }
form#my-form-id {
  width   : 60em;
  padding : .4em;
  }
button {
  margin : 1em .4em 0 0;
  width  : 6em;
  }
.cols-3-parts {
  display   : flex;
  flex-wrap : wrap;
  }
.cols-3-parts fieldset {
  flex-grow : 1;
  width     : 30%;
  }
.cols-3-parts fieldset label {
  display : block;
  float   : left;
  clear   : left; 
  }
.cols-3-parts fieldset label b {
  display       : inline-block;
  width         : 11.4em;
  text-overflow : "";
  white-space   : nowrap;
  overflow      : hidden;
  }
.cols-3-parts fieldset label b::after {
  content     : '...............................';
  color       : grey;
  font-weight : normal;
  }
.cols-3-parts fieldset label input[type="checkbox"] {
  vertical-align: top;
  }
.cols-3-parts fieldset label em {
  font-size      : .8em;
  vertical-align : top;
  }
<h1>JOE'S FAMILY DINER</h1>

<form action="xx" id="my-form-id">
  <div class='cols-3-parts'> </div>

  <button type="submit">Submit</button>
  <button type="reset" >Reset</button>
</form>

<p id="total">
  Total : $ <em>0.00</em>
</p>

推荐阅读