复选框和单选按钮。值

Question

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

 <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

这里有一些非常基本的错误代码。

1. [HTML] - 我想你想你的单选按钮，在自己的电视机一起工作。例如：只选择gf1或gf2（现在您可以选择两者）。你这样做，他们的名字，所以双方必须是gf1
2. [HTML] - 您的按钮onclick是大写的，但你的JS是不是（BerekeningCalorie() VS berekeningCalorie
3. [JavaScript的] - Syntacticly，你需要在你的所有if条件括号
4. [JavaScript的] - getElementByName不是方法getElementByNames（复数）是，但返回的元素集合，您可以给他们所有id属性和使用getElementById，或者只是我们。 E中的document.formName.inputName（如你的价值观document.CalorieForm.gf1例如完成）
5. [JavaScript的] - 你的计算值应为total = total + addition或total += addition; 您当前的（total += total + addition）将总数加倍，然后添加附加数字。
6. [JavaScript] - 输入值实际上是一个字符串，而不是数字。所以你需要使用parseInt来增加它的数值：
7. [JavaScript] - 你不输出值，我想这就是[name="Calorie"]输入是什么。
8. [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; 
}