【发布时间】：2021-07-04 01:25:46
【问题描述】：
如何使用 javascript 来隔离 html 文件中所有选中的项目。
我想看看检查了什么，这告诉我从菜单中选择了哪些项目。
菜单上有所检查项目的价格。
您如何访问在具有价格的 javascript 数组中选中的那些项目。
然后我想总结一下在 html 菜单上选中的所有项目的价格。
差一点就收到码了。
我想使用forEach()，然后将使用它检查的项目隔离为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>
【问题讨论】：
-
您是否希望在单击提交按钮或单击总计按钮或选中/取消选中复选框时进行此操作。
标签： javascript arrays split sum numbers