復選框的問題在于您正在設置 的初始值，var selectTotal = 0并且在選中一個復選框時，將使用 進行計算selectTotal = 0，這意味著total3.innerHTML = checkboxesTotal * selectTotal = 190 * 0 = 0（對于選中的第一個復選框）。selectTotal您可以通過初始化為默認值（標準）來更改它，2或者在選中復選框時，您可以從下拉列表中獲取選定的值。
第一種方法是var selectTotal = 2：
var checkboxes = document.querySelectorAll('.sum')
var select = document.querySelector('#select')
var total3 = document.querySelector('#payment-total')
var total6 = document.querySelector('#payment-total2')
var total12 = document.querySelector('#payment-total3')
var checkboxesTotal = 0;
var selectTotal = 2; // Standard (default dropdown value)
checkboxes.forEach(function(input) {
input.addEventListener('change', onCheckboxSelect)
})
select.addEventListener('click', onSelectChange)
function onCheckboxSelect(e) {
var sign = e.target.checked ? 1 : -1
checkboxesTotal += sign * parseInt(e.target.value, 10)
renderTotal()
}
function onSelectChange(e) {
var value = parseInt(e.target.value, 10)
if (!isNaN(value)) {
selectTotal = value
renderTotal()
}
}
function renderTotal() {
total3.innerHTML = checkboxesTotal * selectTotal
total6.innerHTML = (checkboxesTotal * selectTotal / 100) * (-10) + (checkboxesTotal * selectTotal)
total12.innerHTML = (checkboxesTotal * selectTotal / 100) * (-20) + (checkboxesTotal * selectTotal)
}
<ul>
<li><label class="checkbox">
<input value="190" type="checkbox" class="sum"> Wadowice
</label></li>
<li><label class="checkbox">
<input value="190" type="checkbox" class="sum"> Kalwaria
</label></li>
<li><label class="checkbox">
<input value="170" type="checkbox" class="sum"> Zator
</label></li>
</ul>
<br/>
<br/>
<select id="select" name="select">
<option value="1" class="sum">Basic</option>
<option value="2" class="sum" selected="selected">Standard</option>
<option value="3" class="sum">Premium</option>
</select>
<br/>
<p>
3 months <br>sum: <span id="payment-total">0</span> ;- month.
</p>
<p>
6 months <br>sum: <span id="payment-total2">0</span> ;- month.
</p>
<p>
12 months <br>sum: <span id="payment-total3">0</span> ;- month.
</p>
第二種方法是在選擇復選框時獲取下拉值：
var checkboxes = document.querySelectorAll('.sum')
var select = document.querySelector('#select')
var total3 = document.querySelector('#payment-total')
var total6 = document.querySelector('#payment-total2')
var total12 = document.querySelector('#payment-total3')
var checkboxesTotal = 0;
var selectTotal = 0;
checkboxes.forEach(function(input) {
input.addEventListener('change', onCheckboxSelect)
})
select.addEventListener('click', onSelectChange)
function onCheckboxSelect(e) {
var sign = e.target.checked ? 1 : -1
checkboxesTotal += sign * parseInt(e.target.value, 10)
var select = document.getElementById("select");
// get selected value and assign it to the global variable selectTotal
selectTotal = select.options[select.selectedIndex].value;
renderTotal()
}
function onSelectChange(e) {
var value = parseInt(e.target.value, 10)
if (!isNaN(value)) {
selectTotal = value
renderTotal()
}
}
function renderTotal() {
total3.innerHTML = checkboxesTotal * selectTotal
total6.innerHTML = (checkboxesTotal * selectTotal / 100) * (-10) + (checkboxesTotal * selectTotal)
total12.innerHTML = (checkboxesTotal * selectTotal / 100) * (-20) + (checkboxesTotal * selectTotal)
}
<ul>
<li><label class="checkbox">
<input value="190" type="checkbox" class="sum"> Wadowice
</label></li>
<li><label class="checkbox">
<input value="190" type="checkbox" class="sum"> Kalwaria
</label></li>
<li><label class="checkbox">
<input value="170" type="checkbox" class="sum"> Zator
</label></li>
</ul>
<br/>
<br/>
<select id="select" name="select">
<option value="1" class="sum">Basic</option>
<option value="2" class="sum" selected="selected">Standard</option>
<option value="3" class="sum">Premium</option>
</select>
<br/>
<p>
3 months <br>sum: <span id="payment-total">0</span> ;- month.
</p>
<p>
6 months <br>sum: <span id="payment-total2">0</span> ;- month.
</p>
<p>
12 months <br>sum: <span id="payment-total3">0</span> ;- month.
</p>
