該問題涉及以編程方式取消檢查輸入而不引發(fā)change事件。
說明：該change事件僅在“當用戶通過單擊或使用鍵盤提交對元素值的更改時”觸發(fā)，并且“不一定在每次對元素值的更改時觸發(fā)”
對于您的情況：?選中一個選項后，我們希望取消選中其他選項。我們想要添加選中選項的價格并減去未選中選項的價格。然而：
為了減去未選中的選項，我們需要觸發(fā)該change事件。
我們只想在選中某個選項時取消選中其他選項。
我們不想在取消選中某個選項時取消選中其他選項。
我們只想減去從checked 變?yōu)閡nchecked 的選項。
我們不想減去已經(jīng)未選中的選項。
所以，而不是這個：
$('.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');
? }
}
下面，我合并了一些重復(fù)的代碼，試圖使事情盡可能干燥。現(xiàn)在，每個選項都有相同的名稱“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>
替代方法
不要考慮在浮動價格中添加和減去，而是考慮僅將選定的選項添加到固定基本價格中。每次飲料選項發(fā)生變化時，通過增加所選選項的基本價格來重新計算總價。
當飲料選項發(fā)生變化時，所選飲料的價格將添加到基本價格中。
如果未選擇任何飲品，則基本價格不會添加任何內(nèi)容。
$(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>
通過稍微不同的結(jié)構(gòu)，這個概念可以擴展到處理多個選項組：
$(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>
