关于input中的checked属性

checked属性值是true还是checked

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

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

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

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

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

 

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

<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>

代码运行效果截图如下:

代码分析如下:

(1).仅设置checked属性不赋值,可以将复选框设置为选中状态。

(2).将checked属性值设置为true,也可以将复选框设置为选中状态。

(3).将checked属性值设置为"checked",也可以将复选框设置为选中状态。

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

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

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

 

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

<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>

代码运行效果截图如下:

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

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

看一段代码实例:

 

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<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">

  <input type="checkbox" checked>

  <input type="checkbox" checked=false>

body>

html>

代码运行效果截图如下:

代码分析如下:

(1).默认状态下,第二个复选框处于非选中状态,第三个处于选中状态。

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

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

你可能感兴趣的:(#,前端相关,HTML,JS,checked)