最近本屌絲應項目開發需求,需要做個一個全選的checkbox功能。 
哎呀嗎~~這不是很簡單的事情么,一個總的checkbox,N多個子checkbox,總的checkbox一旦選中,子checkbox全部選中,總的一旦不選中,子的也都不選中。 
拿到這個小需求,本屌絲一陣竊喜,多么簡單的功能啊,OK,兩分鐘完事~~~ 
時間一分一秒的過去,本屌絲內心奔騰的草原的馬兒,從一直逐漸增加到了千萬只~~~ 
這尼瑪怎么回事? 
alert($("#checkbox_all").attr("checked")); 
一直為undefined? 
納尼??? 
為啥會這樣??瀏覽器你傻了嗎?然后果斷換瀏覽器測試,從chrome到IE,從IE到火狐。結果都是這樣 -_-|| 
難道是jquery又做改進了???? 
經過本屌絲用哈勃望遠鏡和高清鐳射電子顯微鏡的查看,終于找到了端倪。。。。 
原來,在jquery1.6版本便對此做出了修改: 
【checked屬性在頁面初始化的時候已經初始化好了,不會隨著狀態的改變而改變。 
也就是說如果checkbox在頁面加載完畢是選中的,那么返回的永遠都是checked(我的一開始就是沒選中) 
如果一開始沒被選中,則返回的永遠是undefined !】 
既然jquery對此做出了修改,那肯定也就是有相應的更好的解決方法: 
.prop()便是解決這個問題的利器! 
具體用法如下: 
alert($("#checkbox_all").prop("checked")); 
此時就會變成true或者false啦~~ 
于是乎,本屌絲的代碼就改成了如下: 
#check_all 為全選的總checkbox,#check_children為子checkbox 
復制代碼 代碼如下:
 
$("#check_all").change(function(){ 
$('.check_children').prop("checked",this.checked); 
}); 
復制代碼 代碼如下:
 
$("#check_all").change(function(){ 
var is_checked = $(this).prop("checked"); 
$('.check_children').prop("checked",is_checked); 
}); 
新聞熱點
疑難解答
圖片精選