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