checked屬性值是true還是checked

admin發表於2019-01-07

核取方塊標籤具有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">
  <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;}

相關文章