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

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和Java的新手。 我不确定问题出在函数checkData（）还是单选按钮和复选框的脚本中，如果有人可以帮助我，将不胜感激。

Answer 1

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

您的浏览器尝试查找具有该确切ID的元素，而不是durationForm的第i个子元素。 您必须遍历durationForm的子节点。 当您尝试遍历孩子等时，使用类似jQuery的内容还可以使您的生活变得更加轻松。

Answer 2

首先，如果您是Javascript初学者，请避免在函数内使用函数，这种用法与javascript“类”更相关。

好了，为解决您的问题，我建议您为表单设置一个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 个解决方案

解决方案1
0 2014-02-21 19:16:23

解决方案2
0 2014-02-21 19:26:53

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

问题描述

2 个解决方案

解决方案1 0 2014-02-21 19:16:23

解决方案2 0 2014-02-21 19:26:53

解决方案1
0 2014-02-21 19:16:23

解决方案2
0 2014-02-21 19:26:53