控制多选框(input[type=checkbox])选中状态

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

设置多选框为选中状态

  1. Javascript
// 设置其checked属性
document.querySelector('#test').checked = true // 选中
document.querySelector('#test').checked = false // 不选中
  1. 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属性控制选中状态的方式则完全失效了!


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

结论

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,851评论 0 44
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 4,676评论 0 2
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 5,614评论 0 11
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 4,743评论 0 8
  • 获取input的checked值是否为true: 第一种: if($("input[name=item][valu...
    西门小妖阅读 5,437评论 0 5

友情链接更多精彩内容