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