您的位置:首頁> 實例代碼> HTML實例

checked屬性值是true還是checked

2019-1-7 18:05| 作者: admin| 查看: 7247| 評論: 0|來自: 螞蟻部落

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

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

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

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

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.tlmhwf.tw/" />
<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.tlmhwf.tw/" />
<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.tlmhwf.tw/" />
<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;}


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
浙江6十1开奖号码查询r