jQuery無法設定checkbox核取方塊選中原因解析

antzone發表於2017-03-13
jQuery

很多編碼者可能遇到這樣的奇怪情況，那就是使用jQuery設定checkbox核取方塊選中狀態的時候出現無效現象，儘管程式碼沒有任何錯誤，下面就介紹一下為什麼會出現此種現象，和解決此問題的方式，希望能夠給需要的朋友帶來幫助。

先來看一個程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/demo/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#selectall").click(function(){
    $('input[type=checkbox]').attr("checked","checked")
  })
  $("#cancel").click(function(){
    $('input[type=checkbox]').attr('checked',false);
  })
})
</script>
</head>
<body>
<input type="checkbox" value="螞蟻部落"/>螞蟻部落一
<input type="checkbox" value="螞蟻部落"/>螞蟻部落二
<input type="button" id="selectall" value="全選"/>
<input type="button" id="cancel" value="取消"/>
</body>
</html>

在以上程式碼中，當第一次全選，然後再取消全選之後，再次點選全選，這個時候就會沒有作用，這個在jQuery1.9之前是沒有任何問題的，在IE8和IE8以下瀏覽器也沒有問題，為了解決這個問題，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/demo/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#selectall").click(function(){
    $('input[type=checkbox]').prop("checked","checked")
  })
  $("#cancel").click(function(){
    $('input[type=checkbox]').prop('checked',false);
  })
})
</script>
</head>
<body>
<input type="checkbox" value="螞蟻部落"/>螞蟻部落一
<input type="checkbox" value="螞蟻部落"/>螞蟻部落二
<input type="button" id="selectall" value="全選"/>
<input type="button" id="cancel" value="取消"/>
</body>
</html>

只要將attr()函式修改為prop()函式即可。主要原因主要是涉及到元素property和attribute屬性的區別問題。

相關文章