javascript - 获取 Javascript 中复选框的总值和下拉列表的选定值？

Question

我将下拉列表设置为零。单击第一个复选框后是否可以将其更改为一个？另一个问题是计算。因此，在单击复选框并更改数量后(假设我选择数量 = 2，因此应付金额将为 370)，如果我从额外项目中选择某些内容，则桌面的金额将重置为基本价格 = 185(数量 = 1)

var amountDue = document.getElementById("amountDue");
var desktopAddOns = document.querySelectorAll(".products");

var selectOptions = document.getElementById("selectbasic");
var selectedValue;

var total = 0;
var price = 0;

//Removes the add on options from view
document.getElementById("desktops").onchange = function () {
  if (document.getElementById("desktops").checked) {
    price = 185;
  } else if (document.getElementById("desktops").checked == false) {
    price = 185;
    removeAddOns(price);
  }
  addAddOns(price);
};
document.getElementById("wirelessCard").onchange = function () {
    if (document.getElementById("wirelessCard").checked) {
        price = 30;
    } else if (document.getElementById("wirelessCard").checked == false) {
        price = 30;
        removeAddOns(price);
    }
    addAddOns(price);
};
//amountDue.innerHTML += total;
function addAddOns(price) {
  total += price;
  amountDue.innerHTML = total;
}
function removeAddOns(price) {
  total -= price * 2;
  amountDue.innerHTML = total;
}

selectOptions.addEventListener('change', () => {
  selectedValue =  selectOptions.options[ selectOptions.selectedIndex].value;

  amountDue.innerHTML = Math.round(total * selectedValue);
})

<div class=" products">
    <div class="form-group">
        <label for="chkYes1">
            <input type="checkbox" id="desktops" name="" value="desktops" />
            desktop $185.00 &nbsp;&nbsp;
        </label>
    </div>
    <select id="selectbasic" name="" class="">
        <option value="1">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div><br>


                <label class=" font-weight-bold" for="checkboxes">Extra Items for Purchase
                    (Desktop)</label>
                <div>
                    <div class="extraItemsDesktop">
                        <label for="checkboxes-0">
                            <input type="checkbox" name="wirelessCard" id="wirelessCard" value="wirelessCard">
                            Wireless Card - $30.00
                        </label>
                    </div>


<div class="form-group border border-dark rounded py-3 px-5">
    <h3>Amount Due: <p id="amountDue">0</p>
    </h3>
</div>

Answer 1

尝试以下修改后的代码:

var amountDue = document.getElementById("amountDue");
var desktopAddOns = document.querySelectorAll(".products");

var selectOptions = document.getElementById("selectbasic");

function calculateTotal() {
  var oDesktopAddOn = document.getElementById("desktops");
  var oWirelessCardAddOn = document.getElementById("wirelessCard");
  var dTotal = 0;

  if (oDesktopAddOn.checked) {
    dTotal += 185;

    var iNumberofItems = selectOptions.options[selectOptions.selectedIndex].value;
    dTotal = Math.round(dTotal * iNumberofItems);
  }

  if (oWirelessCardAddOn.checked) {
    dTotal += 30;
  }

  amountDue.innerHTML = dTotal;
}

document.getElementById("desktops").addEventListener("change", function() {
  selectOptions.value = 1;
  calculateTotal();
});
document.getElementById("wirelessCard").addEventListener("change", calculateTotal)
selectOptions.addEventListener('change', calculateTotal);

<div class=" products">
  <div class="form-group">
    <label for="chkYes1">
            <input type="checkbox" id="desktops" name="" value="desktops" />
            desktop $185.00 &nbsp;&nbsp;
        </label>
  </div>
  <select id="selectbasic" name="" class="">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</div><br>


<label class=" font-weight-bold" for="checkboxes">Extra Items for Purchase
                    (Desktop)</label>
<div>
  <div class="extraItemsDesktop">
    <label for="checkboxes-0">
                            <input type="checkbox" name="wirelessCard" id="wirelessCard" value="wirelessCard">
                            Wireless Card - $30.00
                        </label>
  </div>


  <div class="form-group border border-dark rounded py-3 px-5">
    <h3>Amount Due:
      <p id="amountDue">0</p>
    </h3>
  </div>