关于input中的checked属性

最新推荐文章于 2024-08-25 08:00:25 发布

flybone7

最新推荐文章于 2024-08-25 08:00:25 发布

阅读量2.5w

点赞数 16

分类专栏： # 前端相关文章标签： HTML JS checked

前端相关专栏收录该内容

11 篇文章 0 订阅

订阅专栏

checked属性值是true还是checked

2019-1-7 18:05| 作者: admin| 查看: 4657| 评论: 0|来自: 蚂蚁部落

复选框标签具有checked属性，通过此属性可以设置复选框的选中状态。

非常简单的操作，但是还是有不少朋友存在后面类似的疑问，那就是不确定checked属性值是true还是checked。

因为两个属性值在实际代码中都有出现，并且都是有效的，也是导致出现疑问的主要原因。

下面通过代码实例详细进行一下分析，首先看一段代码实例：

[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

input{

width:20px;

height:20px;

}

</style>

</head>

<body>

<input type="checkbox" checked>

<input type="checkbox" checked=true>

<input type="checkbox" checked="checked">

</body>

</html>

代码运行效果截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201901/07/180600fi9i9p5kks6k9yiv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

代码分析如下：

（1）.仅设置checked属性不赋值，可以将复选框设置为选中状态。

（2）.将checked属性值设置为true，也可以将复选框设置为选中状态。

（3）.将checked属性值设置为"checked"，也可以将复选框设置为选中状态。

上面三种情况都比较容易接受，因为在代码中比较常见，实际编码中仅推荐第一中方式。

第二和第三种方式不被推荐，具体参阅HTML 布尔属性值一章节。

虽然后两种方式非常符合情理，能够将复选框设置为选中状态，也许这只是一个误会，这两个值并不是专属，有些属性值会让不少朋友匪夷所思，看如下代码实例：

[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

input{

width:20px;

height:20px;

}

</style>

</head>

<body>

<input type="checkbox" checked=false>

<input type="checkbox" checked=true>

</body>

</html>

代码运行效果截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201901/07/180640ikkvmdpcwcvxd5xe.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

是不是感觉很奇怪，按照常理，checked属性值为true是选中状态，那么属性值为false就是未选中状态。

然而事实是，即便属性值为false，复选框依然是选中状态。其实有这样有一个规律，那就是在HTML中，只要设置checked属性，无论是否赋值，或者赋何种值，复选框都是选中状态。但是在通过JavaScript进行操作的时候，并非如此。

看一段代码实例：

[HTML] 纯文本查看 复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style type="text/css">

input{

width:20px;

height:20px;

}

</style>

<script>

window.onload=function(){

let inputs=document.getElementsByTagName("input");

inputs[1].checked=true;

inputs[2].checked=false;

}

</script>

</head>

<body>

<input type="checkbox">

<input type="checkbox" checked>

<input type="checkbox" checked=false>

</body>

</html>

代码运行效果截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201901/07/180705os4hcmh73vcmcsm0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

代码分析如下：

（1）.默认状态下，第二个复选框处于非选中状态，第三个处于选中状态。

（2）.通过JavaScript动态两个复选框分别设置为选中和取消选中。

由此可见，在使用JavaScript进行动态操作的时候，设置checked属性值可为true或者false可以复选框设置为选中和非选中状态，经过测试，设置为"checked"也可以设置为选中状态，设置为undefined也可以取消选中，不过我们最好还是标准一些，毕竟MDN将checked属性阐述为布尔型类型，截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201901/07/180719ujl1j3jijil4ix44.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$