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

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

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

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

想到與美女有親密接觸機(jī)會(huì)，馬上雞動(dòng)起來。

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

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

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>

關(guān)于官方文檔，見：http://api.jquery.com/attr/

或者h(yuǎn)ttp://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()二次勾選問題的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: