在網頁表單中，其中一個常用的元素就是選取方塊 (Checkbox)，如果配合 JavaScript，可以實現很多實用的功能。
檢查 Checkbox 是否被選取
要檢查 Checkbox 是否已被選取，可以使用 document.form_name.checkbox_name.checked 來檢查，如果回傳值是 true，代表已選取；回傳 false 則代表未選取。以下是簡單的例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script language="javascript" type="text/javascript"> function checkbox_status() { if (document.form1.mybox.checked) { alert("mybox 已被選取"); } else { alert("mybox 未被選取"); } } </script> <form name="form1"> <input type="checkbox" name="mybox" value="123" /><br /> <a href="javascript:checkbox_status();">檢查選取方塊狀態</a> </form> |
在以上例子，當按下 “檢查選取方塊狀態” 後，JavaScript 會檢查 mybox 是否被選取，然後用警告視窗的方式顯示結果。
實際應用
以上功能在實際應用上也很有用，例如要求使用者註冊時必須同意條款方可註冊，或者是限制使用者可以選取的項目個數，以下例子會示範使用者必須選取 checkbox 才可按 submit 按鈕：
|
1 2 3 4 5 6 7 8 9 10 |
<script language="javascript" type="text/javascript"> function agree_box() { document.form1.submit.disabled = !document.form1.agree.checked; } </script> <form name="form1"> <input type="checkbox" name="agree" value="yes" onclick="agree_box();"> 我同意使用條款<br /> <input type="submit" name="submit" value="Submit" disabled> </form> |
上面的例子在檢查 agree 選取方塊的狀態後，再設定 submit 按鈕的 disabled 屬性。如果當 disabled 屬性設定成 true 時，元素會無法使用；設成 false 便可以使用。
至於在第 3 行的程式碼內，就是將 submit 按鈕的 disabled 屬性設定成與 document.form1.agree.checked 回傳值相反，因為 agree 方塊被選取後會回傳 true。