首頁 web前端 js教程 解決checkbox的attr(checked)一直是undefined問題_jquery

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

May 16, 2016 pm 04:44 PM
undefined

最近本屌絲應專案開發需求,需要做個全選的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);
});


不過,我還是很喜歡用第一種方法的啦,程式碼越少越好嘛~~write less ,do more !
很方便的解決了全選的問題呀~~~
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

PHP Notice: Undefined property: 的解決方法 PHP Notice: Undefined property: 的解決方法 Jun 22, 2023 pm 02:48 PM

在使用PHP編寫程式碼時,我們可能會遇到「Notice:Undefinedproperty」這個錯誤提示。這個錯誤提示意味著我們正在存取一個未定義的屬性,通常是因為該屬性在程式碼中尚未被初始化。那麼,該如何解決這個問題呢?以下是幾種可能的解決方法:初始化屬性這是解決問題的最簡單方法。在程式碼中明確地初始化屬性,可以確保它在使用前已經被定義。例如:class

Vue中的TypeError: Cannot read property '$XXX' of undefined,該如何處理? Vue中的TypeError: Cannot read property '$XXX' of undefined,該如何處理? Nov 25, 2023 pm 12:14 PM

如果你在使用Vue.js進行開發時,經常遇到「TypeError:Cannotreadproperty'$XXX'ofundefined」的錯誤提示,那麼該如何處理呢?本文將介紹這個錯誤的原因以及如何解決。問題的原因在使用Vue.js的時候,我們常常會用this來呼叫Vue元件的方法,例如:exportdefault{data()

undefined和null是什麼意思 undefined和null是什麼意思 Nov 20, 2023 pm 02:39 PM

在JavaScript 中,undefined和null都代表著「無」的概念:1、undefined 表示一個未初始化的變數或一個不存在的屬性,當宣告了一個變數但沒有對其賦值時,這個變數的值就是undefined ,當存取物件中不存在的屬性時,傳回的值也是undefined;2、null表示一個空的物件引用,在某些情況下,可以將物件的引用設為null,以便釋放其佔用的記憶體。

undefined是什麼 undefined是什麼 Jul 31, 2023 pm 02:28 PM

undefined是代表一個值或變數不存在或未定義的狀態。它可以作為預設值來判斷一個變數是否已經被賦值,也可以用來設定預設參數值。儘管在不同的程式語言中,undefined可能具有不同的意義和用法,但理解undefined的概念可以幫助我們更好地理解和編寫程式。

如何解決 golang 中的 'undefined: path.Join” 錯誤? 如何解決 golang 中的 'undefined: path.Join” 錯誤? Jun 24, 2023 pm 01:12 PM

在Go語言中,path套件是處理檔案路徑的重要工具之一。其中path.Join()函數可以將多個路徑組合成一個完整的路徑。但是,有時你會遇到「undefined:path.Join」的錯誤訊息,該怎麼辦呢?以下是幾個常見的解決方法:檢查import語句首先,你需要確認自己已經正確import了path套件。在Go語言中,匯入包時可

什麼時候用null和undefined 什麼時候用null和undefined Nov 13, 2023 pm 02:11 PM

null和undefined都表示缺少值或未定義的狀態,根據使用場景的不同,選擇使用null或undefined有以下一些指導原則:1、當需要明確指示一個變數為空或無效時,可以使用null;2、當一個變數已經宣告但尚未賦值時,會被預設為undefined;3、當需要檢查一個變數是否為空或未定義時,使用嚴格相等運算子「===」來判斷變數是否為null或undefined 。

null和undefined有什麼不同 null和undefined有什麼不同 Nov 08, 2023 pm 04:43 PM

null和undefined的差異在:1、語意意義;2、使用場景;3、與其它值的比較;4、與全域變數的關係;5、與函數參數的關係;6、可空性檢定;7、性能考慮;8、在JSON序列化中的表現;9、與類型的關係。詳細介紹:1、語意意義,null通常表示知道這個變數不會擁有任何有效的物件值,而undefined則通常表示變數未被賦值,或物件沒有此屬性;2、使用場景等等。

PHP Notice: Undefined offset: 0的解決方法 PHP Notice: Undefined offset: 0的解決方法 Jun 22, 2023 am 08:12 AM

在PHP開發中,有時候我們運行程式碼會出現「PHPNotice:Undefinedoffset:0」的提示,這個提示通常伴隨著一個陣列越界錯誤的出現。當陣列下標超出指定範圍時,PHP會預設將其值置為NULL,並給予一則通知訊息。這則提示訊息雖然不影響程式的執行,但會影響程式的運作效率和程式碼的可讀性。那麼,遇到這種情況我們該怎麼辦呢?以下介紹一些解決

See all articles