基于复选框单选按钮调整总成本标价

感谢您分享您的尝试，现在我可以帮助您更正代码了。让我们逐一讨论代码的问题：

1.左侧分配无效

与Visual Basic等语言不同，在JavaScript中，必须有一个双==运算符才能检查条件。因此，在下一行：

if (member = 1 && event = 4 && attendees = 1)

JavaScript真正理解的是：

将1放入CCD_ 1，将1放入CCD_ 2中，并将1放入CCD_ 3中。

为了让JS检查它们的值是否等于1，您需要使用一个二重方程运算符：

if (member == 1 && event == 4 && attendees == 1)

2.使用系统保留关键字

前一个之所以是一个问题，是因为event这个词毕竟，JS可以简单地为所有关键字分配1，但它却在控制台中添加了一个错误，说分配无效，那为什么呢？-这是因为在JavaScript中有一个名为event的保留关键字，它表示函数中的事件参数。所以当你分配

onchange="checkTotal()"

一旦调用该函数来处理更改事件，事件数据将在内置的event变量中传递给该函数。因此，您应该将输入元素的名称更改为其他名称，可能是"eventCheckBox">或其他名称。

3.重复ID

Id应该是唯一的。当你在JS中按ID搜索某个东西时，它会从页面顶部搜索并返回它找到的第一个，因为它假设这个ID是唯一的。此外，在JavaScript中，您可以通过元素ID来寻址元素，而无需首先使用getElementsByID()获取元素，因此，当您使用与页面上的多个ID名称相同的var名称时，您看到问题了吗？为每个元素创建唯一的id。如果您想要元素的公共标识符，请使用公共类。

4.获取单选按钮的值

最有可能的是，您试图将单选按钮命名为相同的名称，并认为当您询问值时，您会得到选中按钮的值。好吧，它的想法很好，但不幸的是，它在JavaScript中不能以这种方式工作。您需要做的是找到选中的一个并获取其值。它相当简单，只有一行代码：

document.querySelector('input[name="member"]:checked').value;

*这同样适用于参和者。

5.计数选中复选框

虽然遍历复选框并更改总值是可行的，但使用下一行来计算其中检查了多少要简单得多

document.querySelectorAll('input[name="eventCheckBox"]:checked').length;

6.可选

如果您希望在更改与会者和会员资格时更新总价，则还需要向他们添加更改事件。

这是你的固定代码：

function checkTotal() {
  //get values from the inputs
  var attendees = document.querySelector('input[name="attendees"]:checked').value;
  var member = document.querySelector('input[name="member"]:checked').value;
  var SelectedEvents = document.querySelectorAll('.EventCheckBox:checked').length;
  //init vars;
  var total = 0;
  var price = 26.00;
  if (member == 1) {
    price = 18.00;
  }
  //calculate cost
  total = SelectedEvents * attendees * price;
  if (member == 1 && SelectedEvents == 4 && attendees == 1) {
    total = 68.00;
  }
  if (member == 1 && SelectedEvents == 4 && attendees == 2) {
    total = 136.00;
  }
  document.getElementById("total").value = "$" + total.toFixed(2);
}

<font color="orange">How many attendees?</font> 
<input type="radio" name="attendees" value="1" checked="checked" onchange="checkTotal()" />1
<input type="radio" name="attendees" value="2" onchange="checkTotal()" />2
<br/>
<font color="orange">Are you a Member?</font> 
<input type="radio" name="member" value="0" checked="checked" onchange="checkTotal()" />No
<input type="radio" name="member" value="1" onchange="checkTotal()" />Yes
<br/>
<br/>
<form name="listForm"><font color="orange">Select the Concerts you want Tickets for:</font>
  <br/>
  <input type="checkbox" name="eventCB1" value="1" onchange="checkTotal()" class="EventCheckBox" /><font color="#33FF33"> <div class="price"></div></font>
  </input>Nov. 1, 2015 -- Concert 1
  <br/>
  <input type="checkbox" name="eventCB2" value="1" onchange="checkTotal()" class="EventCheckBox" /><font color="#33FF33"> <div class="price"></div></font>
  </input>Dec. 1, 2015 -- Concert 2
  <br/>
  <input type="checkbox" name="eventCB3" value="1" onchange="checkTotal()" class="EventCheckBox" /><font color="#33FF33"> <div class="price"></div></font>
  </input>Jan. 1, 2015 -- Concert 3
  <br/>
  <input type="checkbox" name="eventCB4" value="1" onchange="checkTotal()" class="EventCheckBox" /><font color="#33FF33"> <div class="price"></div></font>
  </input>Feb. 1, 2015 -- Concert 4
  <br/>
  <br/>
  <font color="#33FF33">Total Cost:</font> 
  <input value="$0.00" readonly="readonly" type="text" id="total" />
</form>

和Fiddle

更新：

如果所有复选框上的名称相同会导致任何类型的问题，则可以轻松处理。

javascript/html/css有很多不同的方法来实现相同的结果，随着时间的推移，你会学到更多的技巧，现在有两个：

a。^=属性选择器：

这将选择属性以特定字符串开头的所有元素
之前，我们使用它们的确切名称选择了所有输入：

document.querySelectorAll('input[name="eventCB"]:checked')

这选择了CCD_ 9属性等于CCD_。现在，我们的元素现在在名称后面附加了ID，但所有元素仍然以相同的字符串member1开头，因此我们可以如下更改选择器：

document.querySelectorAll('input[name^="eventCB"]:checked')

b。普通类

在我看来，为事件设置一个公共类，并使用该类来选择它们要容易得多；让它们的类为"EventCheckBox"，例如：

document.querySelectorAll('.EventCheckBox:checked').length;

选择器字符串开头的点表示类选择。如果没有点，它将按类型选择元素，如果有点，它选择类，如果有#，它将根据ID选择。

我已经更新了上面的片段和fiddle。