-5

我已经开发了一个我在图片中显示的表格。我想要的是，当我选择复选框 A 时，复选框 1 和 2 应该自动选择和取消选择。当我选择复选框 B 时，它应该自动检查复选框 3 和 4 并类似地取消选择。我还想要复选框与价格相关的另一件事，即在这种情况下为 20 美元。因此，当复选框被选中时，其价格将被添加到总数中。例如，如果我选择前 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; $20 <br>
  <input type="checkbox"> 2 &nbsp; $20<br>
  <input type="checkbox"> 3 &nbsp; $20<br>
  <input type="checkbox"> 4 &nbsp; $20<br>
  <input type="checkbox"> 5 &nbsp; $20<br>
  <input type="checkbox"> 6 &nbsp; $20<br>

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

是的，那里已经很少有答案了，但我想用javascript和以前的答案来做，主要是使用jquery，第二件事是我还想添加与复选框相关的价格。那是我在谷歌上没有找到的。

4

1 回答 1

0

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

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>

于 2019-09-12T13:24:39.203 回答