jquery checkbox無法用attr()二次勾選問題的解決方法

更新時間：2016年07月22日 09:49:33 投稿：jingxian

下面小編就為大家?guī)硪黄猨query checkbox無法用attr()二次勾選問題的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

今晨，漂亮的測試妹妹提了個奇怪的bug，說我一功能checkbox時隱時現(xiàn)，比如第一次打開有勾選，第n次打開可能就不選了。

想到與美女有親密接觸機會，馬上雞動起來。

經(jīng)過偶層層抽次剝繭（da da jiang you），終于知道了原因：attr()在二次選中勾選框時，失效。

比如，如下HTML頁面，一點【選中】、二點【取消選中】、三點【選中】，瞧，不行了唄。

1.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>prop demo</title>
 <style>
 img {
  padding: 10px;
 }
 div {
  color: red;
  font-size: 24px;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
 <input type="checkbox" checked="checked">
 <input type="checkbox">
 <input type="checkbox">
 <input type="checkbox" checked="checked">
 
<script>
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
 return !val;
});
</script>
 
</body>
</html>

解決方案，是使用prop()替換attr()方法（在Jquery1.6以上），如下代碼：

2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Attr checked</title>
<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
<script type="text/javascript">
  function switchChecked(flag) {
    $("input[type='checkbox']").prop('checked', flag);
  }
</script>
</head>
<body>
  <input type="checkbox" />
  <input type="button" onclick="switchChecked(true)" value="選中">
  <input type="button" onclick="switchChecked(false)" value="取消選中">
</body>
</html>

關于官方文檔，見：http://api.jquery.com/attr/

或者http://api.jquery.com/prop/

摘抄如下：“As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.”

以上這篇jquery checkbox無法用attr()二次勾選問題的解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: