Question

<html><!--start of html file-->
<head><!--start of head-->

</head><!--end of head-->
<script type = "text/javascript" ><!--Start of javascript-->
function checkData()/*function to check data*/
{
    function checkDay()
    {
    var car;
    var extras;
    for (i=0; i<document.durationForm.length;i++)
    {
        if(document.durationForm[i].checked)
        {
            document.getElementById("durationForm[i]");
            alert(durationForm[i]);
        }
    }
    }//end of checkDay()
    /*for (i=0; i<document.carForm.length;i++)
    {
        if(document.carForm[i].checked)
        {
            document.getElementById("carForm");
        }
    }*/
    /*alert("You got" + cartype + rbutton + extras);*/


}   
function hello()
{
    alert("hi");
}
</script><!-- end of script-->




<body><!--start of body-->

    <table border = "1" align = "center"><!--start of table-->
        <tr><!-- start table row-->
            <td><b>DURATION<br/>
            <!-- start duration table column-->
                <form name= "durationForm">
                    <input type="radio" name="duration" id= "One Day" value="One Day" checked="checked">One Day <br>
                    <input type="radio" name="duration" id= "Weekend"value="Weekend">Weekend                    <br>
                    <input type="radio" name="duration" id= "Weekly" value="Weekly">Weekly                      <br></b>
                </form>
            </td>

            <td><b>VEHICLE TYPE</b><br/>
            <!-- start Vehicle type table column-->
                <form name = "carForm">
                    <input type="radio" name="car" value="Compact Car" checked="checked">Compact Car <br>
                    <input type="radio" name="car" value="Midsize">Midsize <br>
                    <input type="radio" name="car" value="Fullsized">Fullsized <br>
                    <input type="radio" name="car" value="Van">Van <br>
                </form>
            </td>
        </tr><!-- end table row-->
        <tr><!-- start table row-->
            <td colspan  = "2" align = "center"><b>EXTRA</b><br/>
            <!-- start Extras table column-->
                <table><!--check box table-->
                    <tr>
                        <td><input type= "checkbox" name = "A/C"/> A/C(+$10) </td>
                        <td><input type= "checkbox" name = "Working Brakes"/> Working Brakes(+$100)</td>
                    </tr>
                    <tr>
                        <td><input type= "checkbox" name = "Cruise Control"/>Cruise Control (+$20) </td>
                        <td><input type= "checkbox" name = "Baby Seat"/> Baby Seat(+$30) </td>
                    </tr>
                </table><!--end of check box table-->
            </td>
        </tr><!-- end table row-->
        <tr><!-- start table row-->
            <td colspan  = "2" align = "center">
                <form name = "myForm">
                    <input type = "button" value = "Estimated Cost" onClick="checkData();">
                    <!-- start Estimated Cost button table column-->
                </form>
            </td>
        </tr><!-- end table row-->
    </table><!-- end table-->
</body><!-- end body-->
</html><!-- html file-->

我是HTML和Javascript的新手。我不确定问题是在函数checkData（）的脚本中，还是单选按钮和复选框，如果有人可以帮助我，我将不胜感激。

Answer 1

您不能document.getElementById("durationForm[i]");

您的浏览器尝试查找具有该确切ID的元素，而不是durationForm的i子元素。您必须遍历durationForm的子节点。使用像jQuery这样的东西也会让你的生活变得更轻松，因为你试图穿越孩子等等。

Answer 2

如果你是一个Javascript begginer，首先要避免在函数内部使用函数，这种用法更多地与javascript“classes”相关联。

好吧，为了解决您的问题，我会重新设置表单的ID以通过Web Standard getElementById文档函数来访问它。

假设您的表单现在有一个ID：

HTML：

 <form name= "durationForm" id="durationForm">

使用Javascript：

function checkData() 
{
    var frmDuration = document.getElementById('durationForm');
    checkForm(frmDuration);
}

function checkForm(frmTarget)
{
    for (i=0; i<frmTarget.length;i++) 
    {
        if (frmTarget.elements[i].type == 'CHECKBOX') 
        {
            alert(frmTarget.elements[i].value);
        }
    }

}

考虑到这一点，您还可以检查多个表单，如下所示：

function checkDataAll() 
{
    for (var i = 0; i < document.forms.length; i++) 
        checkForm(document.forms[i]);
}

如何使用单选按钮和复选框与JavaScript

2 个答案: