inputchecked詳解

一、checked屬性簡介

在HTML中，form表單元素中的input有很多種類型，如text、radio、checkbox等，其中checkbox類型元素有一個特殊的屬性checked，用於表示該選項是否被選中。

<label>
  <input type="checkbox" name="fruit" value="apple" checked>
  Apple
</label>
<label>
  <input type="checkbox" name="fruit" value="banana">
  Banana
</label>
<label>
  <input type="checkbox" name="fruit" value="orange" checked>
  Orange
</label>

上面的代碼演示了三個複選框選項，其中名字相同，value不同。其中apple和orange選項被加上了checked屬性，表示初始狀態下這兩個選項處於選擇狀態。

二、使用inputchecked控制checked屬性

inputchecked是一種偽類，表示當input元素的狀態被選中時的樣式。

input:checked {
  border: 2px solid green;
}

上面的代碼表示當一個input被選中時，添加2px的綠色實線邊框。

但是，偽類inputchecked並不能控制checked屬性本身。因此我們需要javascript。

三、使用javascript控制checked屬性

1. 使用prop方法設置checked屬性

jQuery中可以使用prop方法來控制checked屬性。

$('input[name=fruit][value=apple]').prop('checked', true);

上面的代碼使用prop方法將名字為fruit、value為apple的複選框設置為選中狀態。

2. 使用attr方法設置checked屬性

在jQuery版本不低於1.6時，也可以使用attr方法來設置checked屬性。

$('input[name=fruit][value=apple]').attr('checked', true);

3. 使用原生javascript設置checked屬性

對於不使用jQuery的網頁，可以使用原生javascript來控制checked屬性。

document.getElementsByName('fruit')[0].checked = true;

上面的代碼使用原生javascript獲取名字為fruit的第一個複選框來設置checked屬性為true。

四、小結

本文介紹了HTML中input的checked屬性，以及使用inputchecked偽類和javascript控制checked屬性的方法。

注意：使用javascript改變checked屬性時，需要注意表單元素的name和value屬性。