JavaScript中,checkbox(復選框)是一種常見的HTML表單元素。它允許用戶選擇或取消選擇多個選項之一。
使用Checkbox時,我們可以利用JavaScript的DOM操作來訪問和操作它們。下面是一些簡單的Checkbox操作示例。
// 獲取一個Checkbox元素 let checkbox = document.getElementById("myCheckbox"); // 檢查一個Checkbox是否被選中 if (checkbox.checked) { console.log("Checkbox已被選中!"); } // 選中一個Checkbox checkbox.checked = true;
Checkbox還可以編程方式創(chuàng)建并添加到HTML文檔中。下面是一個創(chuàng)建Checkbox的示例:
// 創(chuàng)建一個Checkbox元素 let checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.name = "myCheckbox"; checkbox.value = "yes"; // 添加Checkbox到HTML文檔中 let form = document.getElementById("myForm"); form.appendChild(checkbox);
Checkbox還可以與其他元素結(jié)合使用,例如label元素。這樣,單擊標簽時將切換與之關(guān)聯(lián)的Checkbox的狀態(tài)。下面是一個使用label關(guān)聯(lián)Checkbox的示例:
我同意條款和條件
當用戶單擊標簽時,就會將Checkbox的狀態(tài)切換為選中或未選中狀態(tài)。還可以使用JavaScript從代碼中控制Checkbox的狀態(tài)。例如,下面的代碼可以將Checkbox狀態(tài)設置為選中:
let checkbox = document.getElementById("myCheckbox"); checkbox.checked = true;
Checkbox還有一些其它的屬性和方法,例如設置Checkbox的可用或禁用狀態(tài),以及在Checkbox狀態(tài)改變時觸發(fā)事件。通過操作這些屬性和方法,你可以創(chuàng)建強大的JavaScript功能,用于創(chuàng)建交互式用戶界面。