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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報(bào)告每日天氣的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報(bào)告每日天氣的方法,涉及jQuery鼠標(biāo)事件及css樣式操作技巧,需要的朋友可以參考下
2015-05-05
jquery 重寫 ajax提交并判斷權(quán)限后使用load方法報(bào)錯(cuò)解決方法
這篇文章主要介紹了jquery 重寫 ajax提交并判斷權(quán)限后使用load方法報(bào)錯(cuò)解決方法的相關(guān)資料,需要的朋友可以參考下
2016-01-01
Jquery $.getJSON 在IE下的緩存問題解決方法
$.getJSON 的url都是相同的問題來了我修改或者新增樹節(jié)點(diǎn) 然后刷新tree IE竟然毫無變化在其他瀏覽器上面都OK，于是搜到一個(gè)可行的解決方法
2014-10-10
jquery 根據(jù)name名獲取元素的value值
這里給大家分享的是一個(gè)網(wǎng)友咨詢的關(guān)于jQuery獲取name名的value值的問題，感覺很具有普遍性，所以記錄下來，希望對(duì)大家能有所幫助。
2015-02-02
jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航，代碼實(shí)現(xiàn)效果簡(jiǎn)單精致，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery.cookie.js實(shí)現(xiàn)記錄最近瀏覽過的商品功能示例
這篇文章主要介紹了jQuery.cookie.js實(shí)現(xiàn)記錄最近瀏覽過的商品功能,結(jié)合實(shí)例形式分析了基于jQuery.cookie.js插件創(chuàng)建cookie及保存瀏覽記錄的操作技巧,需要的朋友可以參考下
2017-01-01
jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-03-03
jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉×
這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)對(duì)話框右上角菜單帶關(guān)閉× 的相關(guān)資料,需要的朋友可以參考下
2016-05-05
jQuery validate 中文API 附validate.js中文api手冊(cè)
jQuery validate 中文API 附validate.js中文api手冊(cè)
2010-07-07
jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼，非常的簡(jiǎn)單實(shí)用，效果也很棒，有需要的小伙伴可以參考下。
2015-04-04