【jQuery】對於複選框操作的attr與prop
阿新 • • 發佈:2018-12-22
這個是在jQuery1.6版本之後出現的鬼東西。受影響的主要有下拉列表select與複選框checkbox。眾所周知,在jQuery中可以用attr()取出節點的屬性,然而對於checkbox卻不是這樣了,比如我要取出其是否被選中的屬性checked,attr("checked")去取沒有選中的複選框是undefinded的,只能取出被選中複選框的屬性。這個問題,導致我在一個條件判斷中忙活了比較久的事件。查了一下發現,在jQuery1.6版本之後,你取複選框有沒有被選中,要用prop
舉個例子還說明這個問題,如下程式碼,設定兩行完全一模一樣的東西,兩按鈕對一複選框進行操作,一個行內文字,用來顯示Jquery的屬性,唯一不同的是一個用了attr屬性,一個用了prop屬性:
執行效果卻得到如下所示,極其令人驚訝的是,雖然同樣能夠改變複選框的值,使用attr方法去操作的複選框的第一行,其值一直沒有改變。無論選中還是沒有選中一直是checked的狀態,而第二行使用了prop,選中是true,沒選中是沒有選中的undefinded,這才能真正用於if條件的判斷。使用attr取複選框是否被選中,放到if中,只會對頭兩次選擇有效,之後就失效了。因此,以後再jQuery搞複選框,沒什麼事還是用prop。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>attr與prop</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> </head> <body> attr: <button id="selected1"/>選中複選框 </button> <button id="unselected1"/>不選中複選框 </button> <input type="checkbox" id="checkBox1" /> <span id="tip1"></span><br/> prop: <button id="selected2"/>選中複選框 </button> <button id="unselected2"/>不選中複選框 </button> <input type="checkbox" id="checkBox2" /> <span id="tip2"></span><br/> </body> </html> <script type="text/javascript"> $("#selected1").click(function(){ $("#checkBox1").attr("checked",true); $("#tip1").html($("#checkBox1").attr("checked")); }); $("#unselected1").click(function(){ $("#checkBox1").attr("checked",false); $("#tip1").html($("#checkBox1").attr("checked")); }); $("#selected2").click(function(){ $("#checkBox2").prop("checked",true); $("#tip2").html($("#checkBox2").prop("checked")); }); $("#unselected2").click(function(){ $("#checkBox2").prop("checked",false); $("#tip2").html($("#checkBox2").prop("checked")); }); </script>
jQuery你丫為何各個版本的程式碼會不同呢?為何不能像Javascript一樣,能取就能改呢?