控制多选框（input[type=checkbox]）选中状态

多选框input[type=checkbox]也算是经常见面的HTML标签了，又因经常混淆（js与jquery混淆）其控制选中状态的方法。故整理一下，留个笔记...

设置多选框为选中状态

1. Javascript

// 设置其checked属性
document.querySelector('#test').checked = true // 选中
document.querySelector('#test').checked = false // 不选中

2. Jquery

// 方法一
$('#test').prop('checked', true)  // 选中
$('#test').prop('checked', false)  // 不选中

// 方法二（以前的方法，现在不推荐使用，请使用方法一）
$('#test').attr('checked', true)  // 选中
$('#test').attr('checked', false)  // 不选中

容易进入的误区

这里有一个很容易犯的错误：我们在html中对checkbox设置checked属性时，会默认选中checkbox。例如这样：

示例一

这时渲染出的页面中，这个$test会默认被选中。并且在console中修改（删除或添加）这个值，checkbox的选中状态也会随之改变。

示例二

于是乎很多人就以为，只要为checkbox添加上checked属性就可以控制选中状态。但这是错误的！

checked 属性规定在页面加载时应该被预先选定的 input 元素。

为什么是错误的呢？ 因为只要你在项目中，通过任意方式修改过该checkbox的选中状态(可以是点击，也可以是第一节中说的js、jquery方式修改)，那么通过添加删除checked属性控制选中状态的方式则完全失效了！

点击checkbox后，删除checked属性再添加也毫无作用

结论

checked到头来始终只是预先选定元素，并不能用来改变checkbox的状态。你可以用它来设置默认选中项，但要修改选中项，请用第一节中的方法！