JavaScript 表單系列 — 選取方塊

在網頁表單中,其中一個常用的元素就是選取方塊 (Checkbox),如果配合 JavaScript,可以實現很多實用的功能。

檢查 Checkbox 是否被選取
要檢查 Checkbox 是否已被選取,可以使用 document.form_name.checkbox_name.checked 來檢查,如果回傳值是 true,代表已選取;回傳 false 則代表未選取。以下是簡單的例子:

在以上例子,當按下 “檢查選取方塊狀態” 後,JavaScript 會檢查 mybox 是否被選取,然後用警告視窗的方式顯示結果。


實際應用
以上功能在實際應用上也很有用,例如要求使用者註冊時必須同意條款方可註冊,或者是限制使用者可以選取的項目個數,以下例子會示範使用者必須選取 checkbox 才可按 submit 按鈕:

上面的例子在檢查 agree 選取方塊的狀態後,再設定 submit 按鈕的 disabled 屬性。如果當 disabled 屬性設定成 true 時,元素會無法使用;設成 false 便可以使用。
至於在第 3 行的程式碼內,就是將 submit 按鈕的 disabled 屬性設定成與 document.form1.agree.checked 回傳值相反,因為 agree 方塊被選取後會回傳 true。


Leave a Reply