解決checkbox的attr(checked)一直為undefined問題
更新時(shí)間：2014年06月16日 16:33:42 投稿：whsnow
需要做個(gè)一個(gè)全選的checkbox功能，遇到checkbox的attr("checked")一直為undefined，下面與大家分享下最終的解決方案
最近本屌絲應(yīng)項(xiàng)目開發(fā)需求，需要做個(gè)一個(gè)全選的checkbox功能。
哎呀嗎~~這不是很簡單的事情么，一個(gè)總的checkbox，N多個(gè)子checkbox，總的checkbox一旦選中，子checkbox全部選中，總的一旦不選中，子的也都不選中。
拿到這個(gè)小需求，本屌絲一陣竊喜，多么簡單的功能啊，OK，兩分鐘完事~~~
時(shí)間一分一秒的過去，本屌絲內(nèi)心奔騰的草原的馬兒，從一直逐漸增加到了千萬只~~~
這尼瑪怎么回事？
alert($("#checkbox_all").attr("checked"));
一直為undefined？
納尼？？？
為啥會這樣？？瀏覽器你傻了嗎？然后果斷換瀏覽器測試，從chrome到IE，從IE到火狐。結(jié)果都是這樣 -_-||
難道是jquery又做改進(jìn)了？？？？
經(jīng)過本屌絲用哈勃望遠(yuǎn)鏡和高清鐳射電子顯微鏡的查看，終于找到了端倪。。。。
原來，在jquery1.6版本便對此做出了修改：
【checked屬性在頁面初始化的時(shí)候已經(jīng)初始化好了，不會隨著狀態(tài)的改變而改變。
也就是說如果checkbox在頁面加載完畢是選中的，那么返回的永遠(yuǎn)都是checked（我的一開始就是沒選中）
如果一開始沒被選中，則返回的永遠(yuǎn)是undefined ！】
既然jquery對此做出了修改，那肯定也就是有相應(yīng)的更好的解決方法：
.prop()便是解決這個(gè)問題的利器！
具體用法如下：
alert($("#checkbox_all").prop("checked"));
此時(shí)就會變成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 !
很方便的解決了全選的問題呀~~~
哎呀嗎~~這不是很簡單的事情么，一個(gè)總的checkbox，N多個(gè)子checkbox，總的checkbox一旦選中，子checkbox全部選中，總的一旦不選中，子的也都不選中。
拿到這個(gè)小需求，本屌絲一陣竊喜，多么簡單的功能啊，OK，兩分鐘完事~~~
時(shí)間一分一秒的過去，本屌絲內(nèi)心奔騰的草原的馬兒，從一直逐漸增加到了千萬只~~~
這尼瑪怎么回事？
alert($("#checkbox_all").attr("checked"));
一直為undefined？
納尼？？？
為啥會這樣？？瀏覽器你傻了嗎？然后果斷換瀏覽器測試，從chrome到IE，從IE到火狐。結(jié)果都是這樣 -_-||
難道是jquery又做改進(jìn)了？？？？
經(jīng)過本屌絲用哈勃望遠(yuǎn)鏡和高清鐳射電子顯微鏡的查看，終于找到了端倪。。。。
原來，在jquery1.6版本便對此做出了修改：
【checked屬性在頁面初始化的時(shí)候已經(jīng)初始化好了，不會隨著狀態(tài)的改變而改變。
也就是說如果checkbox在頁面加載完畢是選中的，那么返回的永遠(yuǎn)都是checked（我的一開始就是沒選中）
如果一開始沒被選中，則返回的永遠(yuǎn)是undefined ！】
既然jquery對此做出了修改，那肯定也就是有相應(yīng)的更好的解決方法：
.prop()便是解決這個(gè)問題的利器！
具體用法如下：
alert($("#checkbox_all").prop("checked"));
此時(shí)就會變成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實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動的動感菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動的動感菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)呈現(xiàn)文字上下滑動變換的效果,涉及jQuery頁面元素樣式的動態(tài)設(shè)置技巧,需要的朋友可以參考下2015-09-09
隨鼠標(biāo)上下滾動，在某些時(shí)候需要類似的效果，下面有個(gè)不錯(cuò)的示例可以實(shí)現(xiàn)此效果，需要的朋友可以參考下2013-12-12
這篇文章主要介紹了移動手機(jī)APP手指滑動切換圖片特效附源碼下載的相關(guān)資料,需要的朋友可以參考下2015-11-11
jQuery實(shí)現(xiàn)的老虎機(jī)跑動效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的老虎機(jī)跑動效果,涉及jQuery事件響應(yīng)以及結(jié)合時(shí)間函數(shù)動態(tài)操作頁面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
利用jQuery實(shí)現(xiàn)滑動開關(guān)按鈕效果（附demo源碼下載）
這篇文章主要介紹了利用jQuery實(shí)現(xiàn)滑動開關(guān)按鈕效果，文中給出了詳細(xì)的介紹，并在文末給出了完整的demo源碼下載，有需要的朋友可以參考簡介，下面來一起看看吧。2017-02-02
jquery根據(jù)一個(gè)值來選中select下的option實(shí)例代碼
下面小編就為大家?guī)硪黄猨query根據(jù)一個(gè)值來選中select下的option實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
淺談jQuery綁定事件會疊加的解決方法和心得總結(jié)
下面小編就為大家?guī)硪黄獪\談jQuery綁定事件會疊加的解決方法和心得總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了easyUI下拉列表點(diǎn)擊事件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
jquery.Jcrop結(jié)合JAVA后臺實(shí)現(xiàn)圖片裁剪上傳實(shí)例
這篇文章主要介紹了jquery.Jcrop結(jié)合JAVA后臺實(shí)現(xiàn)圖片裁剪上傳實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-11-11
jQuery編輯器KindEditor4.1.4代碼高亮顯示設(shè)置教程
接下來介紹下編輯器KindEditor4.1.4代碼高亮顯示設(shè)置：加載需要的JS和CSS文件/編輯器初始化設(shè)置后，在里面加prettyPrint等等，感興趣的你可以參考下本文2013-03-03