Javascript 是一種腳本語言,通常用於網頁的動態特效和互動。 Checkbox 是一種用於表單的輸入元素,可讓使用者選擇一個或多個選項。在某些情況下,我們希望 checkbox 不被選中,這時候就可以使用 Javascript 來實作這個功能。
常見的情況包括:
有時我們希望頁面載入時某些 checkbox 預設是未選取狀態。可以給這些 checkbox 加上 disabled 屬性,使其無法被選取。
HTML 程式碼:
這樣這幾個 checkbox 就會一開始就是被停用的狀態,無法被選取。
有時我們需要根據使用者的選擇來判斷是否要讓某個 checkbox 處於未選取狀態。這時候可以使用 Javascript 來實作。
HTML 程式碼:
當 checkbox 改變時,會執行 onchange 事件。在該事件中,我們可以根據 checkbox 的狀態來判斷是否要讓它變成未選取狀態。
Javascript 程式碼:
function disableIfChecked(checkbox) { if (checkbox.checked) { checkbox.checked = false; } }
這段程式碼中的 if 語句判斷 checkbox 是否被選中,如果是,則將其設為未選取狀態。
另外一個常見情況是,我們希望使用者在點擊一個按鈕後,某些 checkbox 變成未選取狀態。同樣,這也可以用 Javascript 來實現。
HTML 程式碼:
在這個範例中,我們有三個 checkbox 和一個按鈕。當點選按鈕時,Javascript 會執行函數 disableCheckboxes(),來設定 checkbox 為未選取狀態。
Javascript 程式碼:
function disableCheckboxes() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = false; } } }
這段程式碼中,我們先取得所有的 input 元素,然後判斷它們的型別是否是 checkbox。如果是,就將其設為未選取狀態。
還有一種情況是,我們希望使用者在進行表單提交時,某些 checkbox 不可選。同樣,這也可以使用 Javascript 來實作。
HTML 程式碼:
在這個範例中,我們為 form 元素新增了一個 onsubmit 事件,也就是在表單提交時執行的函數。然後在該函數中,我們可以將 checkbox 設定為未選取狀態,以避免使用者誤操作。
Javascript 程式碼:
function disableCheckboxesOnSubmit() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { if (checkboxes[i].checked) { // 如果 checkbox 被选中,则禁用它 checkboxes[i].disabled = true; } } } }
這段程式碼中,我們同樣使用了取得所有 input 元素以及判斷其類型的方法。不過這次我們判斷 checkbox 是否被選中,如果是,就將其停用。這樣,使用者在提交表單時就無法再次選取該 checkbox 了。
以上就是使用 Javascript 禁止 checkbox 被選取的方法。特別要注意的是,這些方法都會影響使用者體驗,因此需要謹慎使用。在無法避免這樣做的情況下,應該在介面中給予適當的提示,告知使用者這些 checkbox 是被停用的。
以上是javascript如何使checkbox不選中的詳細內容。更多資訊請關注PHP中文網其他相關文章!