我有一个食物菜单表格，但我在处理带有复选框的部分时遇到了问题。我想让表单变得更好，所以我将复选框设置为按钮，这样当单击时该框就会被选中。这工作正常，但问题是当我从一个复选框移动到另一个复选框而不取消选中第一个复选框时。它不会从我的总额中减去金额。我使用了以下 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); });当我单击按钮时，总价会正确添加。如果我单击同一个按钮，它会正确减去。如果我在取消单击上一个按钮之前单击另一个按钮，则整个事情会中断并不断添加，因为您无法返回到之前单击的另一个按钮以撤消其值。我需要帮助才能使该函数执行以下操作：如果用户不需要任何额外的饮料，价格保持不变。如果用户选择“喝一杯”，价格就会上涨 5。如果用户再次点击“喝一个”按钮，价格就会下降 5。如果用户点击“喝一个”按钮，然后立即点击“喝两个”按钮，价格只会加上“喝两个”值并减去“喝一个”值。“喝三杯”等也是如此。一次只能选中一个按钮，或者一次不能选中任何按钮。我尝试包含不同步骤的控制台日志以帮助调试。
1 回答
HUWWW
TA贡献1874条经验 获得超12个赞
该问题涉及以编程方式取消检查输入而不引发change事件。
说明：该change事件仅在“当用户通过单击或使用键盘提交对元素值的更改时”触发，并且“不一定在每次对元素值的更改时触发”
对于您的情况： 选中一个选项后，我们希望取消选中其他选项。我们想要添加选中选项的价格并减去未选中选项的价格。然而：
为了减去未选中的选项，我们需要触发该
change事件。我们只想在选中某个选项时取消选中其他选项。
我们不想在取消选中某个选项时取消选中其他选项。我们只想减去从checked 变为unchecked 的选项。
我们不想减去已经未选中的选项。
所以，而不是这个：
$('.drinks').on('change', function() {
$('.drinks').not(this).prop('checked', false);
});
我们可以使用这个：
$('.drinks').on('change', function() {
if (this.checked) {
$('.drinks:checked').not(this).prop('checked', false).trigger('change');
}
}
下面，我合并了一些重复的代码，试图使事情尽可能干燥。现在，每个选项都有相同的名称“drink”，并且单个处理程序绑定到所有选项。
示范：
$(function() {
const $priceDisplay = $('#pricedisplay');
const $drinks = $('.drinks');
let totalprice = 200;
$priceDisplay.html("$" + totalprice);
$drinks.on('change', function() {
// if changed input is checked ...
if (this.checked) {
// for all checked except this, uncheck and trigger "change" event
$drinks.filter(':checked').not(this).prop('checked', false).trigger('change');
}
// add or subtract price depending on checked state
totalprice = this.checked
? totalprice + parseFloat(this.value)
: totalprice - parseFloat(this.value);
// update display
$priceDisplay.html("$" + totalprice);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<div class="chks">
<div id="ck-button-one">
<label>
<input class="drinks" type="checkbox" name="drink" value="5">
<span>One</span>
</label>
</div>
<div id="ck-button-two">
<label>
<input class="drinks" type="checkbox" name="drink" value="10">
<span>Two</span>
</label>
</div>
<div id="ck-button-three">
<label>
<input class="drinks" type="checkbox" name="drink" value="20">
<span>Three</span>
</label>
</div>
</div>
<div class="price">Purchase Price:
<span id="pricedisplay"></span>
</div>
替代方法
不要考虑在浮动价格中添加和减去，而是考虑仅将选定的选项添加到固定基本价格中。每次饮料选项发生变化时，通过增加所选选项的基本价格来重新计算总价。
当饮料选项发生变化时，所选饮料的价格将添加到基本价格中。
如果未选择任何饮品，则基本价格不会添加任何内容。
$(function() {
const basePrice = "200";
const $priceDisplay = $('#pricedisplay');
const $drinks = $('.drinks');
$priceDisplay.html("$" + basePrice);
$drinks.on('change', function() {
let newPrice = parseFloat(basePrice);
$drinks.not(this).prop('checked', false);
$drinks.filter(':checked').each(function() {
newPrice += parseFloat(this.value);
});
$priceDisplay.html("$" + newPrice);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chks">
<div id="ck-button-one">
<label>
<input class="drinks" type="checkbox" name="drink" value="5">
<span>One</span>
</label>
</div>
<div id="ck-button-two">
<label>
<input class="drinks" type="checkbox" name="drink" value="10">
<span>Two</span>
</label>
</div>
<div id="ck-button-three">
<label>
<input class="drinks" type="checkbox" name="drink" value="20">
<span>Three</span>
</label>
</div>
</div>
<div class="price">Purchase Price:
<span id="pricedisplay"></span>
</div>
通过稍微不同的结构，这个概念可以扩展到处理多个选项组：
$(function() {
const basePrice = "200";
const $priceDisplay = $('#pricedisplay');
const $options = $('.option');
$priceDisplay.html("$" + basePrice);
$options.on('change', function() {
// define new price from base price
let newPrice = parseFloat(basePrice);
// uncheck other options in this group
let $thisGroupOpts = $options.filter('[name=' + this.name + ']');
$thisGroupOpts.not(this).prop('checked', false);
// add prices for all checked options
$options.filter(':checked').each(function() {
newPrice += parseFloat(this.value);
});
// display total price
$priceDisplay.html("$" + newPrice);
});
});
.optionsPane {
display: flex;
flex-direction: row;
margin: 0 0 2em;
}
.optionGroup {
flex: 1 1 auto;
}
.optionGroup label {
display: block;
}
#pricedisplay {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionsPane">
<div class="optionGroup">
<h2>Drinks</h2>
<label>
<input class="option" type="checkbox" name="drink" value="5">
<span>One</span>
</label>
<label>
<input class="option" type="checkbox" name="drink" value="10">
<span>Two</span>
</label>
<label>
<input class="option" type="checkbox" name="drink" value="20">
<span>Three</span>
</label>
</div>
<div class="optionGroup">
<h2>Sides</h2>
<label>
<input class="option" type="checkbox" name="side" value="3">
<span>One</span>
</label>
<label>
<input class="option" type="checkbox" name="side" value="4">
<span>Two</span>
</label>
<label>
<input class="option" type="checkbox" name="side" value="5">
<span>Three</span>
</label>
</div>
<div class="optionGroup">
<h2>Deserts</h2>
<label>
<input class="option" type="checkbox" name="desert" value="5">
<span>One</span>
</label>
<label>
<input class="option" type="checkbox" name="desert" value="7">
<span>Two</span>
</label>
<label>
<input class="option" type="checkbox" name="desert" value="10">
<span>Three</span>
</label>
</div>
</div>
<div class="price">Purchase Price:
<span id="pricedisplay"></span>
</div>
添加回答
举报
0/150
提交
取消