解決checkbox的attr(checked)一直為undefined問題
更新時間：2014年06月16日 16:33:42 投稿：whsnow
需要做個一個全選的checkbox功能，遇到checkbox的attr("checked")一直為undefined，下面與大家分享下最終的解決方案
最近本屌絲應(yīng)項目開發(fā)需求，需要做個一個全選的checkbox功能。
哎呀嗎~~這不是很簡單的事情么，一個總的checkbox，N多個子checkbox，總的checkbox一旦選中，子checkbox全部選中，總的一旦不選中，子的也都不選中。
拿到這個小需求，本屌絲一陣竊喜，多么簡單的功能啊，OK，兩分鐘完事~~~
時間一分一秒的過去，本屌絲內(nèi)心奔騰的草原的馬兒，從一直逐漸增加到了千萬只~~~
這尼瑪怎么回事？
alert($("#checkbox_all").attr("checked"));
一直為undefined？
納尼？？？
為啥會這樣？？瀏覽器你傻了嗎？然后果斷換瀏覽器測試，從chrome到IE，從IE到火狐。結(jié)果都是這樣 -_-||
難道是jquery又做改進(jìn)了？？？？
經(jīng)過本屌絲用哈勃望遠(yuǎn)鏡和高清鐳射電子顯微鏡的查看，終于找到了端倪。。。。
原來，在jquery1.6版本便對此做出了修改：
【checked屬性在頁面初始化的時候已經(jīng)初始化好了，不會隨著狀態(tài)的改變而改變。
也就是說如果checkbox在頁面加載完畢是選中的，那么返回的永遠(yuǎn)都是checked（我的一開始就是沒選中）
如果一開始沒被選中，則返回的永遠(yuǎn)是undefined ！】
既然jquery對此做出了修改，那肯定也就是有相應(yīng)的更好的解決方法：
.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 !
很方便的解決了全選的問題呀~~~
哎呀嗎~~這不是很簡單的事情么，一個總的checkbox，N多個子checkbox，總的checkbox一旦選中，子checkbox全部選中，總的一旦不選中，子的也都不選中。
拿到這個小需求，本屌絲一陣竊喜，多么簡單的功能啊，OK，兩分鐘完事~~~
時間一分一秒的過去，本屌絲內(nèi)心奔騰的草原的馬兒，從一直逐漸增加到了千萬只~~~
這尼瑪怎么回事？
alert($("#checkbox_all").attr("checked"));
一直為undefined？
納尼？？？
為啥會這樣？？瀏覽器你傻了嗎？然后果斷換瀏覽器測試，從chrome到IE，從IE到火狐。結(jié)果都是這樣 -_-||
難道是jquery又做改進(jìn)了？？？？
經(jīng)過本屌絲用哈勃望遠(yuǎn)鏡和高清鐳射電子顯微鏡的查看，終于找到了端倪。。。。
原來，在jquery1.6版本便對此做出了修改：
【checked屬性在頁面初始化的時候已經(jīng)初始化好了，不會隨著狀態(tài)的改變而改變。
也就是說如果checkbox在頁面加載完畢是選中的，那么返回的永遠(yuǎn)都是checked（我的一開始就是沒選中）
如果一開始沒被選中，則返回的永遠(yuǎn)是undefined ！】
既然jquery對此做出了修改，那肯定也就是有相應(yīng)的更好的解決方法：
.prop()便是解決這個問題的利器！
具體用法如下：
alert($("#checkbox_all").prop("checked"));
此時就會變成true或者false啦~~
于是乎，本屌絲的代碼就改成了如下：
#check_all 為全選的總checkbox，#check_children為子checkbox
復(fù)制代碼 代碼如下:
$("#check_all").change(function(){
$('.check_children').prop("checked",this.checked);
});
或者：
復(fù)制代碼 代碼如下:
$("#check_all").change(function(){
var is_checked = $(this).prop("checked");
$('.check_children').prop("checked",is_checked);
});
不過，我還是很喜歡用第一種方法的啦，代碼越少越好嘛~~write less ,do more !
很方便的解決了全選的問題呀~~~
相關(guān)文章
jQuery web 組件 后臺日歷價格、庫存設(shè)置的代碼
這篇文章主要介紹了jQuery web 組件 后臺日歷價格、庫存設(shè)置的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了jQuery焦點圖輪播效果實現(xiàn)方法,結(jié)合實例形式簡單分析了jQuery實現(xiàn)焦點圖輪播效果的核心代碼與相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
本文給大家介紹的nanoScrollerJS是一款使用簡單方式實現(xiàn) Mac OS X Lion 系統(tǒng)滾動條效果的jQuery插件。該滾動條插件利用原生的滾動條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04
jQuery列表動態(tài)增加和刪除的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于jQuery列表動態(tài)增加和刪除的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章介紹了jquery彈出關(guān)閉遮罩層實例，有需要的朋友可以參考一下2013-08-08
TimergliderJS 一個基于jQuery的時間軸插件
Timeglider JS是一個由javascript支持縮放，數(shù)據(jù)驅(qū)動的時間軸組件。非常適合顯示項目歷史，項目計劃及其其它需要顯示歷史的項目2011-12-12
jquery刪除指定的html標(biāo)簽并保留標(biāo)簽內(nèi)文本內(nèi)容的方法
有時我們希望刪除這段html代碼里面的一對<p>標(biāo)簽，但是要保持里面的內(nèi)容不被刪除，本文提供的這個jquery方法就可以簡單實現(xiàn)。2014-04-04
在jquery boxy中添加百度地圖坐標(biāo)拾取注意流程
這篇文章主要介紹了在jquery boxy中添加百度地圖坐標(biāo)拾取注意流程,需要的朋友可以參考下2014-04-04
jquery處理checkbox（復(fù)選框）是否被選中實例代碼
這篇文章主要介紹了jquery處理checkbox（復(fù)選框）是否被選中實例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
jQuery+.net實現(xiàn)瀏覽更多內(nèi)容(改編php版本)
改編自php版本這里記錄.net 下的實現(xiàn);首先創(chuàng)建數(shù)據(jù)庫表test，并插入一些測試數(shù)據(jù)接下來建立一個html文件，感興趣的朋友可以參考下哈，希望您可以幫助到你2013-03-03