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