1、html中的checked屬性。仔細研究下會發現一個很怪異的現象。
你知道上面這四個復選框到底那些被選中了?那些沒被選中嗎?
其實乍一看我也不知道結果,運行完后也想不通為什么,查看資料才發現確實是那樣的。
結果是:
其實原理是這樣的,復選框里只要有checked屬性,不管是否為其賦值,結果為空或true或false或任意值,均為選中狀態。
2、利用javascript操作checked來控制復選框是否選中。
結果:
要使其不選中,即設置checked屬性值為false。
3.利用jQuery操作checked來控制復選框選中與否。
結果第一個復選框選中。
相反的,checked屬性值設為false就是未選中了
這里需注意:
無論是用javascript還是jQuery來操作checked屬性,其值均為true或false,切忌帶引號,否則會出錯。
補充:獲取復選框是否選中問題:
例如,有這樣一個例子,我要獲取這三個復選框是否選中:
<input type="checkbox" name="checkbox1" id="checkbox1" checked>看書 <input type="checkbox" name="checkbox2" id="checkbox2">電影 <input type="checkbox" name="checkbox3" id="checkbox3" checked>爬山
在js中,我們可以這樣來寫:
var checkbox1 = document.getElementById("checkbox1"); var checkbox2 = document.getElementById("checkbox2"); var checkbox3 = document.getElementById("checkbox3"); console.log(checkbox1.checked); // true console.log(checkbox2.checked) // false console.log(checkbox3.checked) // true
在jQuery中,可以這樣獲取:
$(function(){ console.log($("#checkbox1").attr('checked')) // checked console.log($("#checkbox2").attr('checked')) // undefined console.log($("#checkbox3").attr('checked')) // checked })
從上面例子可以看出同樣是獲取復選框是否選中,js的獲取值是布爾值,即true 或者 false,而jQuery的獲取值則是checked或者undefined