解決checkbox的attr(checked)一直為undefined問題

來源:互聯網
上載者:User

最近本屌絲應項目開發需求,需要做個一個全選的checkbox功能。

哎呀嗎~~這不是很簡單的事情麼,一個總的checkbox,N多個子checkbox,總的checkbox一旦選中,子checkbox全部選中,總的一旦不選中,子的也都不選中。

拿到這個小需求,本屌絲一陣竊喜,多麼簡單的功能啊,OK,兩分鐘完事~~~

時間一分一秒的過去,本屌絲內心奔騰的草原的馬兒,從一直逐漸增加到了千萬隻~~~

這尼瑪怎麼回事?
alert($("#checkbox_all").attr("checked"));
一直為undefined?


納尼???

為啥會這樣??瀏覽器你傻了嗎?然後果斷換瀏覽器測試,從chrome到IE,從IE到Firefox。結果都是這樣 -_-||

難道是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);
});

不過,我還是很喜歡用第一種方法的啦,代碼越少越好嘛~~write less ,do more !

很方便的解決了全選的問題呀~~~

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.