checkbox中checked屬性的疑惑

複選框標籤具有checked屬性,通過此屬性可以設置複選框的選中狀態。

非常簡單的操作,但是還是有不少朋友存在後面類似的疑問,那就是不確定checked屬性值是true還是checked。

因爲兩個屬性值在實際代碼中都有出現,並且都是有效的,也是導致出現疑問的主要原因。

下面通過代碼實例詳細進行一下分析,首先看一段代碼實例:


 

[HTML] 純文本查看 複製代碼運行代碼

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

<!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] 純文本查看 複製代碼運行代碼

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

<!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] 純文本查看 複製代碼運行代碼

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

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章