Javascript函數不輸出到html

Question

我對JavaScript和Jquery很新，並試圖從外部使用這個腳本來計算用戶選擇的值（單選按鈕和複選框），然後將函數的值輸出到我的通過按下一個按鈕（id submit）HTML頁面（id成本）。這就是我迄今爲止的情況，如果有人能夠幫助我理解它爲什麼不起作用，我會非常感激。

function add() { 
    var val1 = 0; 
     for (i = 0; i < document.form1."radio-choice-v-1"; i++) 
     { 
      if (document.form1."radio-choice-v-1"[i].checked === true) 
      { 
       val1 = document.form1."radio-choice-v-1"[i].value; 
      } 
     } 
    var val2 = 0; 
     for (i = 0; i < document.form2."radio-choice-v-2"; i++) 
     { 
      if (document.form2.radio-"choice-v-2"[i].checked === true) 
      { 
       val2 = document.form2."radio-choice-v-2"[i].value; 
      } 
     } 
    var val3 = 0; 
     for (i = 0; i < document.form3."radio-choice-v-3"; i++) 
     { 
      if (document.form3."radio-choice-v-3"[i].checked === true) 
      { 
       val3 = document."form3.radio-choice-v-3"[i].value; 
      } 
     } 
     var val4 = 0; 
     for (i = 0; i < document.form4."radio-choice-v-4"; i++) 
     { 
      if (document.form4."radio-choice-v-4"[i].checked === true) 
      { 
       val4 = document.form4."radio-choice-v-4"[i].value; 
      } 
     } 

     var val5 = 0; 
     for (i = 0; i < document.form5."radio-choice-v-5"; i++) 
     { 
      if (document.form5."radio-choice-v-5"[i].checked === true) 
      { 
       val5 = document.form5."radio-choice-v-5"[i].value; 
      } 
     } 
     var val6 = 0; 
    for(i = 0; i < document.form6."checkselection"; i++) 
    { 
      val6 = document.form6."checkselection"[i].value; 
     } 

    $("cost").html(" = " + (val1 + val2 + val3 + val4 + val5 + val6)); 

} 

<form name="form1" id="form1"> 
    <fieldset data-role="controlgroup"> 
     <legend>Please select a case:</legend> 
     <input id="radio-choice-v-1a" name="radio-choice-v-1" value="40" CHECKED="checked" type="radio"> 
     <label for="radio-choice-v-1a">Choice 1 (£40)</label> 
     <input id="radio-choice-v-1b" name="radio-choice-v-1" value="45" type="radio"> 
     <label for="radio-choice-v-1b">Choice 2 (£45)</label> 
     <input id="radio-choice-v-1c" name="radio-choice-v-1" value="140" type="radio"> 
     <label for="radio-choice-v-1c">Choice 3 (£140)</label> 
    </fieldset> 
</form> 
<form name="form6" id="form6"> 
    <fieldset data-role="controlgroup"> 
     <legend>Select your extras</legend> 
     <input type="Checkbox" name="checkselection" id="checkbox-extra-1" value="20"> 
     <label for="checkbox-extra-1"> Selection 1 (£20) (recommended)</label> 
     <input type="Checkbox" name="checkselection" id="checkbox-extra-2" value="12"> 
     <label for="checkbox-extra-2">Selection 2 (£12)</label> 
     <input type="Checkbox" name="checkselection" id="checkbox-extra-3" value="4"> 
     <label for="checkbox-extra-3">Selection 3 (£4)</label> 
     <input type="Checkbox" name="checkselection" id="checkbox-extra-4" value="30"> 
     <label for="checkbox-extra-4">Selection 4 (£30)</label> 
    </fieldset> 
</form> 
<form> 
    <input id="submit" type="button" value="Submit" onclick="add();">  
</form> 
£<u id="cost"></u> 

Answer 1

其中有相當多的問題與您的代碼。請看看我上的jsfiddle爲您創建工作示例：

http://jsfiddle.net/95SrV/1/

我不得不註釋掉VAL2 +，因爲你沒有那些其他形式在您提供的樣本HTML：

純JavaScript

var val1 = 0; 
for (i = 0; i < document.form1["radio-choice-v-1"].length; i++) { 
    if (document.form1["radio-choice-v-1"][i].checked === true) { 
     val1 = document.form1["radio-choice-v-1"][i].value; 
    } 
} 

但是，如果你想充分利用jQuery的，你可以使用下面的代碼來代替：

完整的jQuery

var val1 = 0; 
$('[name="radio-choice-v-1"]').each(function() { 
    currentItem = $(this); 
    if (currentItem.is(":checked")) { 
     val1 = currentItem.val(); 
    }   
}); 

Answer 2

試着用這一個。確保所有元素都可用，如"radio-choice-v-2"。

function add() { 

     var val1 = 0;   

     for (var i = 0; i < document.form1["radio-choice-v-1"].length; i++) 
     {    
      if (document.form1["radio-choice-v-1"][i].checked === true) 
      { 
       val1 = document.form1["radio-choice-v-1"][i].value;     
      } 
     } 

     var val2 = 0; 
     for (i = 0; i < document.form2["radio-choice-v-2"].length; i++) 
     { 
      if (document.form2["radio-choice-v-2"][i].checked === true) 
      { 
       val2 = document.form2["radio-choice-v-2"][i].value; 
      } 
     } 

     var val3 = 0; 
     for (i = 0; i < document.form3["radio-choice-v-3"].length; i++) 
     { 
      if (document.form3["radio-choice-v-3"][i].checked === true) 
      { 
       val3 = document.form3["form3.radio-choice-v-3"][i].value; 
      } 
     } 

     var val4 = 0; 
     for (i = 0; i < document.form4["radio-choice-v-4"].length; i++) 
     { 
      if (document.form4["radio-choice-v-4"][i].checked === true) 
      { 
       val4 = document.form4["radio-choice-v-4"][i].value; 
      } 
     } 

     var val5 = 0; 
     for (i = 0; i < document.form5["radio-choice-v-5"].length; i++) 
     { 
      if (document.form5["radio-choice-v-5"][i].checked === true) 
      { 
       val5 = document.form5["radio-choice-v-5"][i].value; 
      } 
     } 
     var val6 = 0; 

     for(i = 0; i < document.form6["checkselection"].length; i++) 
     { 
      if (document.form6["checkselection"][i].checked === true) //Are you missing check here 
       val6 += document.form6["checkselection"][i].value; // += added here 
     } 

     $("#cost").html(" = " + (val1 + val2 + val3 + val4 + val5 + val6)); 
    } 

</script> 



<form name="form1" id="form1"> 
    <fieldset data-role="controlgroup"> 
     <legend>Please select a case:</legend> 
     <input id="radio-choice-v-1a" name="radio-choice-v-1" value="40" CHECKED="checked" type="radio"> 
     <label for="radio-choice-v-1a">Choice 1 (£40)</label> 
     <input id="radio-choice-v-1b" name="radio-choice-v-1" value="45" type="radio"> 
     <label for="radio-choice-v-1b">Choice 2 (£45)</label> 
     <input id="radio-choice-v-1c" name="radio-choice-v-1" value="140" type="radio"> 
     <label for="radio-choice-v-1c">Choice 3 (£140)</label> 
    </fieldset> 
</form> 
<form name="form6" id="form6"> 
    <fieldset data-role="controlgroup"> 
     <legend>Select your extras</legend> 
     <input type="Checkbox" name="checkselection" id="checkbox-extra-1" value="20"> 
     <label for="checkbox-extra-1"> Selection 1 (£20) (recommended)</label> 
     <input type="Checkbox" name="checkselection" id="checkbox-extra-2" value="12"> 
     <label for="checkbox-extra-2">Selection 2 (£12)</label> 
     <input type="Checkbox" name="checkselection" id="checkbox-extra-3" value="4"> 
     <label for="checkbox-extra-3">Selection 3 (£4)</label> 
     <input type="Checkbox" name="checkselection" id="checkbox-extra-4" value="30"> 
     <label for="checkbox-extra-4">Selection 4 (£30)</label> 
    </fieldset> 
</form> 
<form> 
    <input id="submit" type="button" value="Submit" onclick="add();">  
</form> 
£<u id="cost"></u>