使用 Javascript 选中/取消选中复选框
我开发了一个我在图片中展示的表格。我想要的是，当我选择复选框 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 $20 <br>
<input type="checkbox"> 2 $20<br>
<input type="checkbox"> 3 $20<br>
<input type="checkbox"> 4 $20<br>
<input type="checkbox"> 5 $20<br>
<input type="checkbox"> 6 $20<br>
</form>
</div>
<br><br>
Total:
</body>
</html
是的，那里已经有几个答案，但我想用 javascript 和以前的答案主要使用 jquery 来做，第二件事是我还想添加与复选框相关的价格。这是我在谷歌上没有找到的。
偶然的你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 $<span id="price1">20</span><br> <input type="checkbox" id="2"> 2 $<span id="price2">20</span><br> <input type="checkbox" id="3"> 3 $<span id="price3">20</span><br> <input type="checkbox" id="4"> 4 $<span id="price4">20</span><br> <input type="checkbox" id="5"> 5 $<span id="price5">20</span><br> <input type="checkbox" id="6"> 6 $<span id="price6">20</span><br></form></div><br><br>Total: <span id="total"></span>
随时随地看视频慕课网APP
相关分类
JavaScript