我开发了一个我在图片中展示的表格。我想要的是，当我选择复选框 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 回答
侃侃无极
TA贡献2051条经验 获得超10个赞
这不是您的完整解决方案，而是一个工作示例，说明如何完成。我想，你可以先用它。
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>
添加回答
举报
0/150
提交
取消