複選框標籤具有checked屬性,通過此屬性可以設置複選框的選中狀態。
非常簡單的操作,但是還是有不少朋友存在後面類似的疑問,那就是不確定checked屬性值是true還是checked。
因爲兩個屬性值在實際代碼中都有出現,並且都是有效的,也是導致出現疑問的主要原因。
下面通過代碼實例詳細進行一下分析,首先看一段代碼實例:
[HTML] 純文本查看 複製代碼運行代碼
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 |
|
代碼運行效果截圖如下:
代碼分析如下:
(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 |
|
代碼運行效果截圖如下:
是不是感覺很奇怪,按照常理,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 |
|
代碼運行效果截圖如下:
代碼分析如下:
(1).默認狀態下,第二個複選框處於非選中狀態,第三個處於選中狀態。
(2).通過JavaScript動態兩個複選框分別設置爲選中和取消選中。
由此可見,在使用JavaScript進行動態操作的時候,設置checked屬性值可爲true或者false可以複選框設置爲選中和非選中狀態,經過測試,設置爲"checked"也可以設置爲選中狀態,設置爲undefined也可以取消選中,不過我們最好還是標準一些,畢竟MDN將checked屬性闡述爲布爾型類型,截圖如下: