Question

我正在尝试创建一个网站的界面，其价格各不相同，具体取决于是否选中了复选框，如果没有选中，则具有默认值。

变量值在一个表中，其id为'Level1Price'，如果两个复选框都没有被选中，我想默认值为'£5.11'，如果其中一个或两个都是，那么值为chage选择和两个chekc盒子各自保持不同的值。

这两个复选框有id的'partner'和'children'。如果未选中任何复选框（出于本演示的目的），表中“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>

基本上你只是有语法问题（删除错误的＆＃39;元素＆＃39;文本）。

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

如何设置默认值并使用复选框更改价格？

2 个答案: