CheckBox JavaScript 驗證教學與範例

請選擇一種你喜愛的顏色及是否同意，再按送出驗證按鈕

下列是 JavaScript 程式的內容：

<HEAD>
<script type="text/javascript" language="JavaScript">
function isChosen(select) {
// validate that the user made a selection other than default
    if (select.selectedIndex == 0) {
        alert("你忘記選擇顏色了？");
        return false;
    } else {
        return true;
    }
}

// validate that the user has checked one of the radio buttons
function isValidRadio(radio) {
    var valid = false;
    for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
            return true;
        }
    }
    alert("請選擇是否同意？");
    return false;
}

function validateForm(form) {
                    if (isChosen(form.continent)) {
                        if (isValidRadio(form.accept)) {
                            return true;
                        }
                    }
    return false;
}
</script>
</HEAD>
<BODY>
<form method="GET" action="javascript:alert('恭喜你！\n通過驗證!');" name="sampleForm" onsubmit="return validateForm(this)">
請選擇一種你喜愛的顏色：
<select name="continent" id="continent">
<option value="" selected>請選擇</option>
<option value="白色"> 白色
<option value="綠色"> 綠色
<option value="紅色"> 紅色
<option value="黃色"> 黃色
<option value="藍色"> 藍色
<option value="紫色"> 紫色
</select>
<br>
是否同意： 
<input type="radio" name="accept" id="accept1" value="agree">我同意
<input type="radio" name="accept" id="accept2" value="refuse">不同意
<p>
<input type=submit value="送出驗證"> <input type=reset value="清除資料">
</form>
</BODY>

本報導資料來源：本資料取自伍新華電腦工作室 - JavaScript - 基礎課程 - 作者：伍新華

本報導內容或資料，因限人力、時間，非教學會員，不接受任何使用上的教學與指導，敬請見諒。

如果你喜歡這篇辛苦蒐集整理出來的報導資料，歡迎原文轉載並註明出處，以示尊重個人智慧財產，謝謝你的合作。

如果你願意於貴站或部落格中介紹本站，歡迎使用複製網頁研習室連結語法，再次感謝你的支持與愛護。

請按瀏覽器的檢視原始碼查看