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属性。