多选框input[type=checkbox]
也算是经常见面的HTML标签了,又因经常混淆(js与jquery混淆)其控制选中状态的方法。故整理一下,留个笔记...
设置多选框为选中状态
- Javascript
// 设置其checked属性
document.querySelector('#test').checked = true // 选中
document.querySelector('#test').checked = false // 不选中
- Jquery
// 方法一
$('#test').prop('checked', true) // 选中
$('#test').prop('checked', false) // 不选中
// 方法二(以前的方法,现在不推荐使用,请使用方法一)
$('#test').attr('checked', true) // 选中
$('#test').attr('checked', false) // 不选中
容易进入的误区
这里有一个很容易犯的错误:我们在html中对checkbox设置checked属性时,会默认选中checkbox。例如这样:
<input id="test" type="checkbox" name="vehicle" value="Car" checked>
这时渲染出的页面中,这个$test
会默认被选中。并且在console中修改(删除或添加)这个值,checkbox的选中状态也会随之改变。
于是乎很多人就以为,只要为checkbox添加上checked属性就可以控制选中状态。但这是错误的!
checked 属性规定在页面加载时应该被预先选定的 input 元素。
为什么是错误的呢? 因为只要你在项目中,通过任意方式修改过该checkbox的选中状态(可以是点击,也可以是第一节中说的js、jquery方式修改),那么通过添加删除checked属性控制选中状态的方式则完全失效了!
结论
checked
到头来始终只是预先选定元素,并不能用来改变checkbox的状态。你可以用它来设置默认选中项,但要修改选中项,请用第一节中的方法!