單選按鈕的 Javascript 驗證不起作用

Question

假設我有這一段 html 代碼

<!--Marital Status-->
            <div class="gap">
                <table>
                    <tr class="parent">
                        <td>Martial Status:</td>
                        <td>&emsp;
                            <input type="radio" id="rad1" name="Status" value="1">
                            <label for="Single">Single</label>
                            <br>&emsp;
                            <input type="radio" id="rad2" name="Status" value="2">
                            <label for="Married">Married</label>
                        </td>
                    </tr>
                </table>
            </div>

對於 javascript

function validateForm() {
var status = document.getElementsByName("Status");
var validradio = false;
var i = 0;
  while(!validradio && i < status.length){
    if(status[i].checked) validradio = true;
    }
    i++;

  if (!validradio){
    alert("Please select your marital status");
    return false;
  }
}

當我在不檢查單選按鈕的情況下嘗試驗證時，頁面變得沒有響應，並且警報框沒有按應有的方式彈出。 但是當我選中其中一個復選框時，頁面結果只是找到了。 我可以知道，這是怎么回事？

Answer 1

您錯位了 javascript 中的一條語句，將其更改為：

function validateForm() {
    var status = document.getElementsByName("Status");
    var validradio = false;
    var i = 0;
    while(!validradio && i < status.length){
        if(status[i].checked) validradio = true;
        i++;
    }
    if (!validradio){
        alert("Please select your marital status");
        return false;
    }
}

i++在循環之外， i永遠保持在值0 。

Answer 2

這可以大大簡化。 將querySelectorAll與屬性選擇器和:checked偽 class 一起使用並計算結果

 function validateForm() { //Use an attribute selector with:checked to get the number of selected if (document.querySelectorAll("[name=Status]:checked").length < 1;) { alert("Please select your marital status"); return false; } } document.getElementById("validate").addEventListener("click", validateForm);

 <div class="gap"> <table> <tr class="parent"> <td>Martial Status:</td> <td>&emsp; <input type="radio" id="rad1" name="Status" value="1"> <label for="Single">Single</label> <br>&emsp; <input type="radio" id="rad2" name="Status" value="2"> <label for="Married">Married</label> </td> </tr> </table> </div> <button id="validate">Validate</button>