【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一樣，能取就能改呢？