如何在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