在网页表单中，其中一个常用的元素就是选取方块 (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。