Jquery attr("checked") 返回checked或undefined 獲取選中失效
更新時間：2013年10月10日 16:46:20 作者：
$('#cb').attr('checked'); 返回的是checked或者是undefined，不是原來的true和false了，有關(guān)此問題的解決方法如下，感興趣的朋友可以參考下
假設(shè)我們現(xiàn)在需要這樣的場景：頁面上有一個checkbox，我們期望通過Jquery來獲得它是否選中，或者通過Jquery來讓它被選中。
在JQ1.6之前的版本，我們會這樣寫我們的代碼：
<input type='checkbox' id='cb'/>
<script>
//獲取是否選中
var isChecked = $('#cb').attr('checked');
//設(shè)置選中
$('#cb').attr('checked',true);
</script>
這樣寫在JQ1.6之前完全沒問題，可是當我們升級JQ1.6到更高的版本時，問題就來了，此時我們會發(fā)現(xiàn)：
$('#cb').attr('checked'); 返回的是checked或者是undefined，不是原來的true和false了。
并且checked屬性在頁面初始化的時候已經(jīng)初始化好了，不會隨著狀態(tài)的改變而改變。所以如果checkbox一開始是選中的，那么返回的是checked，如果一開始沒被選中，則返回的是undefined。
解決的方法是：
<input type='checkbox' id='cb'/>
<script>
//獲取是否選中
var isChecked = $('#cb').prop('checked');
//或
var isChecked = $('#cb').is(":checked");
//設(shè)置選中
$('#cb').prop('checked',true);
</script>
分析了其中的原因，可以這樣理解：
它將“屬性”與“特性”做了區(qū)別，屬性指的是“name，id”等等，特性指的是“selectedIndex, tagName, nodeName”等等。
JQ1.6之后，可以通過attr方法去獲得屬性，通過prop方法去獲得特性
$("#cb").attr("tagName"); //undefined
$("#cb").prop("tagName"); //INPUT
在JQ1.6之前的版本，我們會這樣寫我們的代碼：
復(fù)制代碼 代碼如下:
<input type='checkbox' id='cb'/>
<script>
//獲取是否選中
var isChecked = $('#cb').attr('checked');
//設(shè)置選中
$('#cb').attr('checked',true);
</script>
這樣寫在JQ1.6之前完全沒問題，可是當我們升級JQ1.6到更高的版本時，問題就來了，此時我們會發(fā)現(xiàn)：
$('#cb').attr('checked'); 返回的是checked或者是undefined，不是原來的true和false了。
并且checked屬性在頁面初始化的時候已經(jīng)初始化好了，不會隨著狀態(tài)的改變而改變。所以如果checkbox一開始是選中的，那么返回的是checked，如果一開始沒被選中，則返回的是undefined。
解決的方法是：
復(fù)制代碼 代碼如下:
<input type='checkbox' id='cb'/>
<script>
//獲取是否選中
var isChecked = $('#cb').prop('checked');
//或
var isChecked = $('#cb').is(":checked");
//設(shè)置選中
$('#cb').prop('checked',true);
</script>
分析了其中的原因，可以這樣理解：
它將“屬性”與“特性”做了區(qū)別，屬性指的是“name，id”等等，特性指的是“selectedIndex, tagName, nodeName”等等。
JQ1.6之后，可以通過attr方法去獲得屬性，通過prop方法去獲得特性
復(fù)制代碼 代碼如下:
$("#cb").attr("tagName"); //undefined
$("#cb").prop("tagName"); //INPUT
您可能感興趣的文章:
- jquery中prop()方法和attr()方法的區(qū)別淺析
- jquery獲取自定義屬性(attr和prop)實例介紹
- jQuery .attr()和.removeAttr()方法操作元素屬性示例
- jQuery學習之prop和attr的區(qū)別示例介紹
- jquery attr方法獲取input的checked屬性問題
- 用JQuery 判斷某個屬性是否存在hasAttr的解決方法
- jquery $(this).attr $(this).val方法使用介紹
- Jquery下attr和removeAttr的使用方法
- jquery 獲取自定義屬性(attr和prop)的實現(xiàn)代碼
- jquery attr()設(shè)置和獲取屬性值實例教程
相關(guān)文章
json數(shù)據(jù)是一種經(jīng)型的實時數(shù)據(jù)交互的數(shù)據(jù)存儲方法，使用到最多的應(yīng)該是ajax與json配合使用了，下面我來給大家介紹jquery處理json數(shù)據(jù)方法2014-01-01
這篇文章主要介紹了jquery自動補齊功能插件flexselect用法,結(jié)合實例形式分析了flexselect實現(xiàn)自動補齊功能的操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-08-08
下面小編就為大家?guī)硪黄猨Query之動畫ajax事件(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
jQuery插件cxSelect多級聯(lián)動下拉菜單實例解析
這篇文章主要為大家詳細解析了jQuery插件cxSelect多級聯(lián)動下拉菜單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
jQuery Layer彈出層傳值到父頁面的實現(xiàn)代碼
這篇文章主要介紹了jQuery Layer彈出層傳值到父頁面的實現(xiàn)代碼,需要的朋友可以參考下2017-08-08
基于jquery實現(xiàn)表單類各種類型(文本框)失去焦點效果，代碼簡單實用，感興趣的朋友可以參考下，希望對你有所幫助2013-04-04
如何在JS中實現(xiàn)相互轉(zhuǎn)換XML和JSON
下面先是跟大家分別介紹了JSON與XML以及它們的區(qū)別比較，后又分享關(guān)于JavaScript實現(xiàn)XML與JSON互轉(zhuǎn)例子，希望這些例子能給你帶來幫助。2016-07-07
jQuery實現(xiàn)按鈕的點擊 全選/反選 單選框/復(fù)選框 文本框 表單驗證
這篇文章主要介紹了jQuery實現(xiàn)按鈕的點擊 全選/反選 單選框/復(fù)選框 文本框 表單驗證的相關(guān)資料,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jquery實現(xiàn)文本框的文本自動補全效果,大家參考使用吧2014-01-01
jquery獲取url參數(shù)及url加參數(shù)的方法
本文給大家介紹jquery獲取url參數(shù)及url參數(shù)的方法，在url中加參數(shù)的方法本文通過多種方式給大家介紹jquery獲取url參數(shù)，感興趣的朋友一起學習學習吧2015-10-10