Question

我已经有了这个，但不知道如何进一步。当我选中2个radiobuttons上面的复选框时，它应该看看是否被选中，然后当我检查1个radiobutton时，它应该检查一个并将值加到总值中。

     <form name="CalorieForm">
    <input type="checkbox" name="gf"> Groente en fruit <br />
      &nbsp <input type="radio" name="gf1" value="60"> Appel (60 kcal per appel) <br />
      &nbsp <input type="radio" name="gf2"value="26"> Paprika (26 kcal per paprika) <br />
    <br>
    <input type="checkbox" name="bpp"> Brood, pasta en peelvruchten <br />
      &nbsp <input type="radio" name="bpp1" value="111"> Zilvervliesrijst (111 kcal per 100 gram) <br />
      &nbsp <input type="radio" name="bpp2" value="24"> Sperziebonen(24 kcal per 100 gram)<br />
    <br>
    <input type="checkbox" name="zvvev"> Zuivel, vlees, vis, ei en vleesvervangers <br />
      &nbsp <input type="radio" name="zvvev1" value="118"> Kabeljauwfilet (118 kcal per 100 gram) <br />
      &nbsp <input type="radio" name="zvvev2" value="115"> Biefstuk (115 kcal per 100 gram) <br />
    <br>
    <input type="checkbox" name="vo"> Vetten en olie <br />
      &nbsp <input type="radio" name="vo1" value="108"> Olie (108 kcal per eetlepel) <br />
      &nbsp <input type="radio" name="vo2" value="90"> Halvarine (90 kcal per 25 gram) <br />
    <br>
    <input type="checkbox" name="v"> Vocht <br />
      &nbsp <input type="radio" name="v1" value="0"> Thee (0 kcal per 0.5 liter) <br />
      &nbsp <input type="radio" name="v2" value="0.6"> Coca cola light (0.6 kcal per blikje) <br />
    <br>
    <input type="button" value="Bereken de calorieën" name="totaal" onClick="BerekeningCalorie()"> <input type="reset" value="Reset" />
    <br>
    <br>
    Aantal calorieën: <input type="text" name="Calorie" size="20"><br />
 </form>

这是我的表格^ 而这里是我未完成的javascript V

        function berekeningCalorie() {
var totaal = 0
if document.getElementByName("gf").checked {
 if document.getElementByName("gf1").checked 
  totaal += totaal + document.CalorieForm.gf1.value
 if document.getElementByName("gf2").checked 
  totaal += totaal + document.CalorieForm.gf2.value
 }

if document.getElementByName("bpp").checked {
 if document.getElementByName("bpp1").checked 
  totaal += totaal + document.CalorieForm.bpp1.value
 if document.getElementByName("bpp2").checked 
  totaal += totaal + document.CalorieForm.bpp2.value
 }
}

我问我的老师该怎么做，她说它应该是这样的（这是我记得她给我看的东西）

有人可以为我解决这个问题吗？我不知道如何继续下去。（javascript noob）。

Answer 1

这里的代码存在一些非常基本的问题。

[HTML] - 我假设您希望您的单选按钮在其集合中一起使用。例如：只选择gf1或gf2（此时您可以选择两者）。你按照他们的名字来做，所以两者都必须是gf1
[HTML] - 您的按钮onclick是大写的，但您的JS不是（BerekeningCalorie() vs berekeningCalorie
[JavaScript] - 从语法上讲，您需要围绕所有if条件使用括号。
[JavaScript] - getElementByName不是方法。 getElementByNames（复数）是，但返回元素集合。您可以向他们提供所有id个属性并使用getElementById，或者只使用document.formName.inputName（就像您为document.CalorieForm.gf1所做的那样）
[JavaScript] - 您的计算应为total = total + addition或total += addition; 您的当前（total += total + addition）是总数的两倍，然后添加额外的数字。
[JavaScript] - 输入值实际上是字符串，而不是数字。因此，您需要使用parseInt以数字方式添加它：
[JavaScript] - 您没有输出该值，我认为这是[name="Calorie"]输入的内容。
[JavaScript] - 另外，为了更好的衡量标准，我假设您意识到自己不是计算

您可以在此处看到已修复：http://jsfiddle.net/rgthree/4sHQg/

HTML：

<form name="CalorieForm">
  <input type="checkbox" name="gf"> Groente en fruit <br />
  <input type="radio" name="gf1" value="60"> Appel (60 kcal per appel) <br />
  <input type="radio" name="gf1" value="26"> Paprika (26 kcal per paprika) <br />
  <br>
  <input type="checkbox" name="bpp"> Brood, pasta en peelvruchten <br />
  <input type="radio" name="bpp1" value="111"> Zilvervliesrijst (111 kcal per 100 gram) <br />
  <input type="radio" name="bpp1" value="24"> Sperziebonen(24 kcal per 100 gram)<br />
  <br><br>
  <input type="button" value="Bereken de calorieën" name="totaal" onClick="BerekeningCalorie()"> <input type="reset" value="Reset" />
  <br><br>
  Aantal calorieën: <input type="text" name="Calorie" size="20">
 </form>

使用Javascript：

function BerekeningCalorie() {
  var totaal = 0;

  // If our gf checkbox is checked, then get the value of the radio buttons.
  // Each have the name 'gf1' so it doesn't matter which is checked.
  // In case neither is checked, we default to 0.
  // Then we use parseInt to calulate the number and add it to totaal
  // otherwise, we would be concatenating two strings, not adding two numbers
  if(document.CalorieForm.gf.checked)
    totaal += parseInt(document.CalorieForm.gf1.value || 0, 10);

  // Do the same for the next, etc.
  if(document.CalorieForm.bpp.checked)
    totaal += parseInt(document.CalorieForm.bpp1.value || 0, 10);

  document.CalorieForm.Calorie.value = totaal;
}

复选框和radiobuttons。值

1 个答案: