Check/Uncheck 个复选框 Javascript

Question

我开发了一个表格，如图所示。我想要的是，当我 select 复选框 A 时，复选框 1 和 2 应该自动 selected 和 unselected 类似。当我 select 复选框 B 时，它应该自动选中复选框 3 和 4，并且类似地取消 select。我还想要复选框与价格相关联的另一件事，即在这种情况下为 20 美元。因此，当复选框被 selected 时，其价格将被添加到总价中。例如，如果我 select 前 2 个复选框，则总价应为 40 美元。我怎样才能用 javascript 做到这一点？我知道 javascript 可以做到这一点，但我不知道 javascript。提前致谢。

<!DOCTYPE html>
<html>
<body>

<h1>Show checkboxes:</h1>
<div style="border:1px solid">
<form action="/action_page.php">
  <input type="checkbox"> A <br>
  <input type="checkbox"> B <br>

</form>
</div>

<div style="border:1px solid; margin-top:20px;">
<form action="/action_page.php">
  <input type="checkbox"> 1 &nbsp;  <br>
  <input type="checkbox"> 2 &nbsp; <br>
  <input type="checkbox"> 3 &nbsp; <br>
  <input type="checkbox"> 4 &nbsp; <br>
  <input type="checkbox"> 5 &nbsp; <br>
  <input type="checkbox"> 6 &nbsp; <br>

</form>
</div>
<br><br>
Total: 
</body>
</html

是的，那里已经有一些答案，但我想用 javascript 来做，而以前的答案主要使用 jquery，第二件事是我还想添加与复选框相关的价格.那是我在 google.

上没有找到的

Answer 1

这不是您的完整解决方案，而是一个工作示例，说明如何完成。我想，你可以用它作为开始。

document.getElementById("a").addEventListener('click', function(event) {
 event.preventDefault();
 deselectAll();
 checkUncheckElement(1, true);
  checkUncheckElement(2, true);
  calculatePrice();
});

document.getElementById("b").addEventListener('click', function(event) {
 event.preventDefault();
  deselectAll();
 checkUncheckElement(3, true);
  checkUncheckElement(4, true);
  calculatePrice();
});

function deselectAll() {
  var elements = document.querySelectorAll('#main > form > input');
  for(var a = 0; a < elements.length; a++) {
   elements[a].checked = false;
  }
}

function checkUncheckElement(id, value) {
 document.getElementById(id).checked = value;
}

function calculatePrice() {
 var elements = document.querySelectorAll('#main > form > input');
  var price = 0;
  for(var a = 0; a < elements.length; a++) {
   if(elements[a].checked == true) {
     price = price + parseInt(document.getElementById('price' + elements[a].id).innerHTML);
    }
  }
      document.getElementById('total').innerHTML = '$' + price;
}

<h1>Show checkboxes:</h1>
<div style="border:1px solid">
<form action="/action_page.php">
  <input type="checkbox" id="a"> A <br>
  <input type="checkbox" id="b"> B <br>

</form>
</div>

<div style="border:1px solid; margin-top:20px;" id="main">
<form action="/action_page.php">
  <input type="checkbox" id="1"> 1 &nbsp; $<span id="price1">20</span><br>
  <input type="checkbox" id="2"> 2 &nbsp; $<span id="price2">20</span><br>
  <input type="checkbox" id="3"> 3 &nbsp; $<span id="price3">20</span><br>
  <input type="checkbox" id="4"> 4 &nbsp; $<span id="price4">20</span><br>
  <input type="checkbox" id="5"> 5 &nbsp; $<span id="price5">20</span><br>
  <input type="checkbox" id="6"> 6 &nbsp; $<span id="price6">20</span><br>
</form>
</div>
<br><br>
Total: <span id="total"></span>

Check/Uncheck 个复选框 Javascript

Check/Uncheck checkboxes with Javascript

html

javascript

checkbox

autofill