【发布时间】：2021-02-25 19:53:16
【问题描述】：
我有一个食物菜单表格，但我在带有复选框的部分遇到问题。
我想让表单更漂亮，所以我将复选框设置为按钮，以便在单击时选中该框。这很好用，但问题是当我从一个复选框移动到另一个而不取消选中第一个复选框时。它不会从我的总数中减去金额。
我使用了以下 jQuery 脚本：
$('.drinks').on('change', function() {
$('.drinks').not(this).prop('checked', false);
});
自动从一个复选框切换到下一个复选框，以图形方式显示，但在我的控制台中，它实际上并没有取消选中其他复选框。
$(document).ready(function(){
console.log("Jquery DOM ready.");
let totalprice="200";
$('#pricedisplay').html("$" + totalprice);
$('input[name=drink-one]').change(function(){
console.log("an input just changed.");
$('input[name=drink-one]:checked').each(function(){
let oneAddon = this.value;
console.log(this.value);
totalprice = parseFloat(totalprice) + parseFloat(oneAddon);
console.log(totalprice);
});
$('input[name=drink-one]:not(:checked)').each(function (){
let oneAddon = this.value;
console.log(this.value);
totalprice = parseFloat(totalprice) - parseFloat(oneAddon);
console.log(totalprice);
});
$('#pricedisplay').html("$" + totalprice)
});
$('input[name=drink-two]').change(function(){
console.log("an input just changed.");
$('input[name=drink-two]:checked').each(function(){
let twoAddon = this.value;
console.log(this.value);
totalprice = parseFloat(totalprice) + parseFloat(twoAddon);
console.log(totalprice);
});
$('input[name=drink-two]:not(:checked)').each(function (){
let twoAddon = this.value;
console.log(this.value);
totalprice = parseFloat(totalprice) - parseFloat(twoAddon);
console.log(totalprice);
});
$('#pricedisplay').html("$" + totalprice)
});
$('input[name=drink-three]').change(function(){
console.log("an input just changed.");
$('input[name=drink-three]:checked').each(function(){
let threeAddon = this.value;
console.log(this.value);
totalprice = parseFloat(totalprice) + parseFloat(threeAddon);
console.log(totalprice);
});
$('input[name=drink-three]:not(:checked)').each(function (){
let threeAddon = this.value;
console.log(this.value);
totalprice = parseFloat(totalprice) - parseFloat(threeAddon);
console.log(totalprice);
});
$('#pricedisplay').html("$" + totalprice)
});
$('.drinks').on('change', function() {
$('.drinks').not(this).prop('checked', false);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="chks">
<div id="ck-button-one">
<label>
<input class="drinks" type="checkbox" name="drink-one" value="5"><span>One</span></input>
</label>
</div>
<div id="ck-button-two">
<label>
<input class="drinks" type="checkbox" name="drink-two" value="10"><span>Two</span></input>
</label>
</div>
<div id="ck-button-three">
<label>
<input class="drinks" type="checkbox" name="drink-three" value="20"><span>Three</span></input>
</label>
</div>
</div>
<div class="price">Purchase Price:
<span id="pricedisplay"></span>
</div>
</body>
</html>当我点击按钮时，总价会正确添加。如果我单击同一个按钮，它会正确减去。如果我在取消单击上一个按钮之前单击另一个按钮，整个事情就会中断并继续添加，因为您无法返回之前单击的另一个按钮以撤消其值。
我需要帮助才能使此功能执行以下操作：
-
如果用户不想要任何额外的饮料，价格保持不变。
-
如果用户选择“喝一个”，价格会上涨 5。
-
如果用户再次点击“drink one's”按钮，价格会下降 5。
-
如果用户点击'drink one's'按钮，然后立即点击'drink one's'按钮，价格只会增加'drink one's'的价值并减去'drink one's'的价值。 'drink-three' 等也是如此。
-
一次只能检查一个按钮，或者一次不能检查任何按钮。
我尝试包含不同步骤的控制台日志以帮助调试。
【问题讨论】：
-
你会考虑使用radio buttons吗？您需要为“无”添加一个按钮，但它可能会简化检查和取消选中按钮的逻辑。
-
这只能处理饮料吗？或者你会有多组按钮用于不同的插件？例如，有人可以添加饮料和配菜，但不添加甜点吗？
标签： javascript html jquery