Question

概述：

这是我第一次使用javascript。我正在尝试使用Radio Buttons和Check Boxes的组合来调整“总成本”和在许多不同条件下的项目的“上市价格”。 JS Fiddle反映了我目前的立场。任何建议，例子，评论或帮助形式都会受到高度赞赏，因为我完全被困住了。

JS Fiddle（代码在下面，因为你不想打开JS Fiddle）：

http://jsfiddle.net/y2u24x3r/4/

我完全坚持的问题\条件：

[Radio 1]有多少与会者？（1）（2）

（2）应将总费用加倍（除非检查所有四个活动框。见下文）。

[Radio 2]你是会员吗？（不）（是）

（否）每场比赛的费用为26.00美元 Jfiddle \代码如下。
（是）将显示的每次活动价格更改为$ 18.00并自动调整总费用。

[四个事件复选框]

如果选中所有四个事件框，参加者='1'，并且您是会员='是'，则覆盖上述所有条件并将价格设置为$ 68.00。
如果选中所有四个事件框，参加者='2'，并且您是会员='是'，则覆盖上述所有条件并将价格设置为$ 136.00。

HTML：

 <font color="orange">How many attendees?</font> <input type="radio" name="attendees" id="attendees" value="1" checked="checked" />1 <input type="radio" name="attendees" id="attendees" value="2"/>2<br/>
 <font color="orange">Are you a Member?</font> <input type="radio" name="member" id="member" value="0" checked="checked" />No <input type="radio" name="member" id="member" value="1"/>Yes <br/><br/>
 <form name="listForm"><font color="orange">Select the Concerts you want Tickets for:</font><br/>
 <input type="checkbox" name="event" value="1" onchange="checkTotal()"/><font color="#33FF33"> <div class="price"></div></font></input> Nov. 1, 2015 -- Concert 1<br/>
 <input type="checkbox" name="event" value="1" onchange="checkTotal()"/><font color="#33FF33"> <div class="price"></div></font></input> Dec. 1, 2015 -- Concert 2<br/>
 <input type="checkbox" name="event" value="1" onchange="checkTotal()"/><font color="#33FF33"> <div class="price"></div></font></input> Jan. 1, 2015 -- Concert 3<br/>
 <input type="checkbox" name="event" value="1" onchange="checkTotal()"/><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>

使用Javascript：

 function checkTotal() {
   var attendees = document.getElementsByName("attendees");
   var member = document.getElementsByName("member");
   var total = 0;
   var event = 0;

    if (member == 0) {
         price = 26.00;
     }           
     else if (member == 1) {
         price = 18.00; 
     }

   for (var i = 0; i < event.length; i++) {
     if (event[i].checked) {
       total += parseFloat(member.value);
         total = total * attendees;

     }
   }

        if (member == 1 && event == 4 && attendees == 1) {
         total = 68.00;
        }

        if (member == 1 && event == 4 && attendees == 2) {
         total = 136.00;
        }

     document.getElementById("total").value = "$" + total.toFixed(2);
 }

Answer 1

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

<强> 1。左侧作业无效

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

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

JavaScript实际理解的是：

将1放入member，将1放入event，并将1放入attendees。

为了让JS检查它们的值是否等于1，你需要使用双方程运算符：

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

<强> 2。使用系统保留关键字

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

onchange="checkTotal()"

一旦调用该函数来处理change事件，事件数据将被传递到内置event var中的函数中。因此，您应该将输入元素的名称更改为其他名称，可能是“eventCheckBox”或其他内容。

第3。重复ID

Ids应该是唯一的。当您在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有很多不同的方法可以达到相同的效果，及时你会学到更多的技巧，现在这里有两个：

<强>一个。 ^=属性选择器：

这将选择具有某个字符串的属性开始的所有元素之前，我们使用他们的确切名称选择了所有输入：

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

这会选择name属性等于"eventCB"的所有已检查输入。现在我们的元素现在已经在名称后附加了ID，但所有元素仍然以相同的字符串"eventCB"开头，因此我们可以按如下方式更改选择器：

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

<强>湾普通班级

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

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

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

我已经更新了上面的片段和小提琴。

根据复选框\单选按钮

1 个答案: