时间戳

首页 > 解决方案 > 用户单击新的下拉选择选项后如何重置复选框值

javascript - 用户单击新的下拉选择选项后如何重置复选框值

问题描述

我有一个带有几个下拉选项的选择框。在每个选项下都会有一个清单和总计（每个清单项目都有一个值）。我需要使用纯 javascript 来完成此操作。

我的问题是我不知道如何使每个清单特定于其下拉项，并在用户单击新的下拉选项后重置复选框值。我已经尝试在totalIt函数中调用该函数，display但我无法让它工作。

小提琴

我的 HTML 是：

<div>
  <select id="store">
    <option value="A">Location A</option>
    <option value="B">Location B</option>
    <option value="C">Location C</option>
  </select>
</div>

<div class="box A">
  Location A<br>
  <input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
  <input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
  Total:
  <input value="0" readonly="readonly" type="text" name="total" />
</div>

<div class="box B">
  Location B
  <br>
  <input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
  <input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
  Total:
  <input value="0" readonly="readonly" type="text" name="total" />
</div>

<div class="box C">
  Location C
  <br>
  <input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
  <input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
  Total:
  <input value="0" readonly="readonly" type="text" name="total" />
</div>

CSS：

.hide {
  display: none;
}

JS：

document.querySelector("select#store").addEventListener("change", () => {
  display(event.target.value);
});

const boxs = document.querySelectorAll("div.box");
 
// Select box show/hide div
function display(value) {
  for (const box of boxs) {
    if (box.classList.contains(value)) {
      box.classList.remove("hide");
    } else {
      box.classList.add("hide");
    }
  }
}
display("A");
   
// Total the values of the checkboxes
function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementsByName("total")[0].value = total + "%";
}

标签： javascript

解决方案

你好，我得到解决你的问题...

document.querySelector("select#store").addEventListener("change", () => {
  display(event.target.value);
});

const boxs = document.querySelectorAll("div.box");
 
// Select box show/hide div
function display(value) {
  for (const box of boxs) {
    if (box.classList.contains(value)) {
      box.classList.remove("hide");
    } else {
      box.classList.add("hide");
    }
  }
}
display("A");
   
// Total the values of the checkboxes
function totalIt(Group) {
  let input = document.querySelectorAll(`.${Group} [name=product]`),
      total = 0,
      totalInput = document.querySelector(`.${Group} [name=total]`)
  input.forEach(input => {
    if(input.checked) total += parseFloat(input.value);
    totalInput.value = total + "%"
  })
}
.hide {
  display: none;
}
.box {
  margin-top:30px;
}
        <div>
            <select id="store">
              <option value="A">Location A</option>
              <option value="B">Location B</option>
              <option value="C">Location C</option>
            </select>
          </div>
          
          <div class="box A">
            Location A<br>
            <input name="product" value="20" type="checkbox" onclick="totalIt('A')" /> 20%<br>
            <input name="product" value="15" type="checkbox" onclick="totalIt('A')" /> 15%<br>
            Total:
            <input value="0" readonly="readonly" type="text" name="total" />
          </div>
          
          <div class="box B">
            Location B
            <br>
            <input name="product" value="20" type="checkbox" onclick="totalIt('B')" /> 20%<br>
            <input name="product" value="15" type="checkbox" onclick="totalIt('B')" /> 15%<br>
            Total:
            <input value="0" readonly="readonly" type="text" name="total" />
          </div>
          
          <div class="box C">
            Location C
            <br>
            <input name="product" value="20" type="checkbox" onclick="totalIt('C')" /> 20%<br>
            <input name="product" value="15" type="checkbox" onclick="totalIt('C')" /> 15%<br>
            Total:
            <input value="0" readonly="readonly" type="text" name="total" />
          </div>

  1. 我转换for loop为forEach数组循环
  2. 我将选择器从更改getElementsByNames为querySelector和querySelectorAll
  3. 我向函数添加参数代表组
  4. 我注意到您为每个组添加类代表名称
  5. 我用它来使input选择器和totalInput选择器专用于每个组......就像document.querySelectorAll(.a [name=product])
  6. 最后我在 html 中调用函数并键入名称组

推荐阅读