JavaScript 中的 Checked 值是一個非常常用的屬性,主要用于檢測和獲取表單元素的選中狀態(tài)。在很多 Web 應(yīng)用中,用戶需要根據(jù)自己的需求選擇多項內(nèi)容,通過 Checked 屬性進行判斷,可以幫助開發(fā)者快速方便地獲取選中內(nèi)容。
比如,在一個多選框中,選項 A、B、C、D,同時可以選擇兩項。我們可以通過以下代碼來獲取選中的選項:
function getChecked() { var count = 0; var result = ""; var items = document.getElementsByName("items"); for(var i = 0; i < items.length; i++) { if(items[i].checked) { count++; if(count <= 2) { result += items[i].value + " "; } } } alert(result); }
以上代碼主要是通過獲取所有 name 屬性為 items 的多選框,循環(huán)判斷每一個多選框是否被選中,如果選中了就進行計數(shù),并將選項值拼接到結(jié)果字符串中。這樣我們就可以很方便地獲取選中的選項,并且控制了最多只能選兩項。
除了在表單中獲取數(shù)據(jù),Checked 屬性還可以用來改變元素的狀態(tài)。比如,在一個單選框列表中,我們需要將某一項設(shè)置成默認選中,可以通過以下方式進行設(shè)置:
document.getElementById("radio1").checked = true;
以上代碼中,我們通過獲取 id 為 radio1 的單選框,并將 Checked 屬性設(shè)置為 true,從而將其設(shè)置為默認選中。
另外,Checked 屬性還有一個常用的應(yīng)用場景是全選/全不選。在很多情況下,我們需要對一些選項進行全選/全不選的操作,可以通過以下代碼進行實現(xiàn):
function selectAll() { var items = document.getElementsByName("items"); for(var i = 0; i < items.length; i++) { items[i].checked = true; } } function unselectAll() { var items = document.getElementsByName("items"); for(var i = 0; i < items.length; i++) { items[i].checked = false; } }
以上代碼分別定義了全選和全不選的方法,通過獲取所有 name 屬性為 items 的多選框,并設(shè)置 Checked 屬性的值,從而實現(xiàn)全選/全不選的效果。
總結(jié)來看,JavaScript 中的 Checked 屬性不僅可以用于檢測和獲取表單元素的選中狀態(tài),還可以用于改變元素的狀態(tài)和實現(xiàn)全選/全不選的操作。在實際應(yīng)用中,我們需要根據(jù)不同的需求進行靈活運用,從而快速解決問題。