Javascript函数没有输出到html

Question

我是Javascript和Jquery的新手，我试图在外部使用这个脚本来计算用户选择的值（单选按钮和复选框），然后将函数的值输出到我的HTML页面（id cost）按下按钮（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>