複選框和單選按鈕。值

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; 
}