如何通过复选框设置默认值和更改价格

Question

我正在尝试创建一个网站的接口，该界面的价格取决于是否检查了复选框，并且如果选择不选中，则具有默认值。

不同的值在一个具有ID" Level1Price"的表中选定以及两个Chekc盒子独自拥有不同的值的位置。

两个复选框具有ID的"伴侣"one_answers"孩子"。当未检查复选框时（出于此示例的目的），表中的'Level1price的值应为5。

如果仅检查"合作伙伴"复选框，则" Level1price"的值为10。

如果仅检查"儿童"复选框，则" Level1price"的值为12。

如果检查了两个复选框，则" Level1price"的值为20。

var partner = document.getElementById("partner");
var children = document.getElementById("children");
function calc()
if (!partner.checked && !children.checked) 
{
  document.getElementById('Level1Price')element.innerHTML = 5;

} else if  (partner.checked && !children.checked) 
{
document.getElementById('Level1Price')element.innerHTML = 10;

} else if (!partner.checked && children.checked) 
{     
  document.getElementById('Level1Price')element.innerHTML = 12;

} else if  (partner.checked && children.checked)
 {
  document.getElementById('Level1Price')element.innerHTML = 20;
 } 

这是我认为会起作用的代码，我正在努力。我很抱歉，如果我犯了新秀错误，我对此很陌生，在任何地方都找不到任何工作解决方案。

预先感谢。

这些是我想帮助更改桌子的谷物的chekcbox。

<div class="addition">
<label for="partner">+ Partner:</label>
<input type="checkbox" name="partner" id="partner" value="partner" required>
</div>
<div class="addition">
<label for="children">+ Children:</label>
<input type="checkbox" name="children" id="children" value="children" required>
</div>
</div>

这是我希望能够填充的表数据

   <tr>
   <td scope=col id="Level1Price" value="5.11"> <b></b> <br/> per month</td>
   <td scope=col id="Level2Price" value="9.97"> <b></b> <br/> per month</td>
   <td scope=col id="Level3Price" value="14.06"> <b></b> <br/> per month</td>
   </tr>

是否可以自动更新而无需"计算"按钮？

Answer 1

提供了您的HTML看起来像：

<span id="Level1Price"></span>

然后：

document.getElementById('Level1Price').innerHTML = 20;

将导致您的HTML为：

<span id="Level1Price">20</span>

基本上您只有语法问题（删除错误的"元素"文本）。

Answer 2

您的代码中存在一个小的语法错误。为了更好地理解，我已经附上了一个功能齐全的代码来满足您的要求。

请参考以下代码。

var partner = document.getElementById("partner");
var children = document.getElementById("children");
function calc() {
  var val = 5;
  if (partner.checked && !children.checked) {
    val = 10;
  } else if (!partner.checked && children.checked) {
    val = 12;
  } else if (partner.checked && children.checked) {
    val = 20;
  }
  document.getElementById('Level1Price').innerHTML = val;
}

Partner: <input type="checkbox" id="partner" /> <br /> Children: <input type="checkbox" id="children" /> <br /> Level1 Price:
<span id="Level1Price"></span>
<br />
<button onClick="calc()">Calculate</button>

如果您仍然发现任何问题或有任何疑问可以随时发表评论，我将更新答案。tia