Question

我正在编写一段代码作为HTML格式的练习，允许用户勾选框（下面的代码是简化的，从8个复选框到2），文本totalPrice应该显示所选项目的价格

<script type='text/javascript'>
function f(){
  if(document.form1.nano1Gb.checked == true)
    document.form1.totalPrice.value = document.form1.priceNano1Gb.value 
  if(document.form1.nano4Gb.checked == true)
    document.form1.totalPrice.value = document.form1.priceNano4Gb.value 
  if(document.form1.nano1Gb.checked == true && document.form1.nano4Gb.checked == true)
    document.form1.totalPrice.value = parseInt(document.form1.priceNano1Gb.value) + parseInt(document.form1.priceNano4Gb.value)
}
</script>
<body>
<form name='form1'>
<p>
<input type='checkbox' name='nano1Gb' onclick=f(); />
<input type='text' value='Nano 1GB'>
<input type='text' name='priceNano1Gb' value='90'</p>

<p>
<input type='checkbox' name='nano4Gb' onclick=f(); />
<input type='text' value='Nano 4 GBb'>
<input type='text' name='priceNano4Gb' value='155'</p>

<p><input type='text' name="totalPrice" placeholder="Total Price"></p>

这适用于两个元素，但是有8个元素，对于我来说，对于每个单独的框检查数百个条件以及总共检查了其他内容，这似乎非常低效。我怎样才能更好地编码？

Answer 1

给他们上课。
使用document.querySelectorAll（＆＃34; .yourclassname：checked＆＃34;）
循环结果
给出一个ID并设置值

＆＃13;

window.onload = function() {
  var checks = document.querySelectorAll(".chk");
  for (var i = 0; i < checks.length; i++) {
    checks[i].onclick = function() {
      total();
    }
  }
}

function getNext(next) {
  do next = next.nextSibling;
  while (next && next.nodeType !== 1);
  return next;
}

function total() {
  var total = 0;
  var checks = document.querySelectorAll(".chk:checked");
  for (var i = 0; i < checks.length; i++) {
    var nameField = getNext(checks[i]);
    var priceField = getNext(nameField);
    total += parseInt(priceField.value, 10); // or parsefloat(priceField.value) if decimal
  }
  document.querySelector("#total").value = total; // or total.toFixed(2) if decimal
}

＆＃13;

<form name='form1'>
  <p>
    <input class="chk" type='checkbox' name='nano1Gb' />
    <input type='text' value='Nano 1GB'>
    <input type='text' name='priceNano1Gb' value='90' />
  </p>

  <p>
    <input class="chk" type='checkbox' name='nano4Gb' />
    <input type='text' value='Nano 4 GBb'>
    <input type='text' name='priceNano4Gb' value='155' />
  </p>

  <p>
    <input id="total" type='text' name="totalPrice" placeholder="Total Price">
  </p>
</form>

＆＃13;

Answer 2

给复选框，值和总输入元素一个类使用querySelector / querySelectorAll选择这些元素如果选中，则使用for循环遍历每个复选框，将其值添加到总计中在这个例子中，我使用了5个复选框。

<script type='text/javascript'>
function f(){
      var val = document.querySelectorAll(".value");
      var check = document.querySelectorAll(".checkbox");
      var allSum = document.getElementByClassName(".total");
      var total = 0;
      for (var i=0; i<check.length; i++) {
        if(check[i].checked === true) {
            total += parseInt(val[i].value);
            allSum.value = total;          
          }
      }
}
</script>
</head>
<body>
<form name='form1'>
<p>
<input class="checkbox" type='checkbox' name='nano1Gb' onclick=f(); />
<input type='text' value='Nano 1GB'>
<input class="value" type='text' name='priceNano1Gb' value='90'</p>

<p>
<input class="checkbox" type='checkbox' name='nano2Gb' onclick=f(); />
<input type='text' value='Nano 2 GB'>
<input class="value" type='text' name='priceNano2Gb' value='115'</p>

<p>
<input class="checkbox" type='checkbox' name='nano3Gb' onclick=f(); />
<input type='text' value='Nano 3 GB'>
<input class="value" type='text' name='priceNano3Gb' value='130'</p>


<p>
<input class="checkbox" type='checkbox' name='nano4Gb' onclick=f(); />
<input type='text' value='Nano 4 GB'>
<input class="value" type='text' name='priceNano4Gb' value='155'</p>

<p>
<input class="checkbox" type='checkbox' name='nano5Gb' onclick=f(); />
<input type='text' value='Nano 5 GB'>
<input class="value" type='text' name='priceNano5Gb' value='170'</p>

<p><input class="total" type='text' name="totalPrice" placeholder="Total Price"></p>
</body>
</html>

HTML检查多个复选框

2 个答案: