2013-02-10 15 views
7

के बाद काम नहीं कर रहे बटन के साथ JQuery चेकबॉक्स टॉगल करें क्या कोई यह समझा सकता है कि 3 बार टॉगल करने के बाद कोड खंड क्यों काम नहीं करता है?कुछ बार

चेक की गई विशेषता अभी भी "चेक" पर सेट है लेकिन ब्राउज़र अब चेकबॉक्स को चेक नहीं करता है।

$(document).ready(function() { 

    $("#btn").click(function() { 

    if($("#chk").is(":checked")) 
     $("#chk").removeAttr("checked"); 
    else 
     $("#chk").attr("checked","checked"); 

    $("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html()); 
    }); 
}); 

, http://jsbin.com/ewawih/2/edit

मैं ओपेरा और क्रोम पर यह दोनों परीक्षण किया है देखें दोनों में एक ही समस्या के साथ।

मुझे यहां क्या याद आ रही है?

उत्तर

6
jQuery 1.9+ के लिए

, गुणों के लिए attr काम नहीं करेगा के लिए यह कारगर होगा, आप के लिए चेकबॉक्स जैसी की एक टॉगल को आसान बनाने में कर सकते हैं:

$("#btn").click(function() { 
     $("#chk").prop("checked",!$("#chk").prop("checked")); 
     $("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html()); 
    }); 

संपादित करें: देखते हैं कि : !$("#chk").prop("checked") ध्यान दें कि पहला चरित्र जो बूलियन मूल्य को वर्तमान में इसके विपरीत मानता है, इस प्रकार टॉगल इसे वर्तमान में जो कुछ भी है, उसके विपरीत सेट करके काम करता है, इससे कोई फर्क नहीं पड़ता कि वह मान क्या है।

बस एक स्पष्टीकरण के लिए, jQuery 1.9+ में attr('checked') तक पहुंचने से मूल विशेषता प्राप्त होती है - जो मार्कअप का एक हिस्सा है, जबकि .prop("checked") उस के लिए वर्तमान संपत्ति मान का उपयोग करता है। कुछ चीजें अभी भी विशेषताएं हैं, हालांकि यह एक ऐसा गुण है जो संपत्ति के रूप में/गुणों के माध्यम से/गुण के रूप में उपयोग को हटा दिया गया था और फिर jQuery 1.9/2.0 में हटा दिया गया था। JQuery 1.6 में उन्होंने परिवर्तन किए और 1.6.1 में उन्होंने उन परिवर्तनों में से कुछ को वापस कर दिया और attr() को हटा दिया, भले ही यह अभी भी उन 1.6.1 परिवर्तनों के कारण काम करता है। 1.9+ फिर उन उपयोगों को हटा दिया। कुछ स्ट्रिंग के रूप में एक विशेषता के बारे में सोचें, और वर्तमान मूल्य के रूप में एक संपत्ति। विशेषता का आपका उपयोग उस स्ट्रिंग तक पहुंच रहा था जो बदल नहीं गया था, जबकि संपत्ति बदल गई थी और इसलिए .prop() क्यों काम करता है।

यह भी ध्यान रखें कि तत्व के लिए टेक्स्ट/रैप (डीबग के लिए मुझे लगता है) का उपयोग संपत्ति को नहीं दिखाता है, बल्कि तत्व की केवल "स्ट्रिंग" जिसमें संपत्ति शामिल नहीं है - इसलिए ऐसा नहीं लगता है/इस तरह अपने "डीबग" में रहें और आपको संपत्ति (एक सच्चा/झूठा मूल्य) तक पहुंच जोड़ने की आवश्यकता होगी और उस मूल्य का एक दृश्य प्रस्तुत करने के लिए भी संलग्न करें।

  • विशेषता मान डिफ़ॉल्ट को दर्शाता है के बजाय वर्तमान दिखाई राज्य और वास्तविक मूल्य (आईई के कुछ पुराने संस्करण अलग) (क्या यह शुरुआत/जब पेज पहले गाया पर मार्कअप में था)। इस प्रकार आप देखते हैं कि विशेषताएं आपको इस बारे में कुछ नहीं बताती हैं कि चेकबॉक्स चेक किया गया है या नहीं।

1.9 के लिए।क्रोम पर 1:

$("#chk").checked //returns undefined 

EDIT2 (, एक बग की तरह लगता है बदलने के लिए पहले काम करता था): गलत: गलत रूप

$("#chk")[0].checked // proper form works 
$("#chk").get(0).checked // same as above, works 
document.getElementById("chk").getAttribute("checked") // returns "checked" or null or "true" or "fun" or empty "" if it was set thay way, attribute present checks box 
$("#chk").is(":checked") // returns true/false current value 
$("#chk").attr("checked") // returns "checked" or undefined does not change 
document.getElementById("chk").defaultChecked // returns true/false of original, does not change 
$("#chk").prop("checked") // returns current value true/false 
document.getElementById("chk").checked //returns current value true/false 
$("#chk").is("[checked]") // attribute selector returns original value, does not change 
+0

उह, अचानक 1.9.1 तक अपग्रेड करना इसके लायक नहीं लगता है। – Langdon

+0

@ लैंगडन हां, आपको '.prop (' चेक ') '1.9.1 के लिए उपयोग करने की आवश्यकता होगी -' attr()' जैसा कि बहिष्कृत नहीं है - जैसा कि मैंने इस उत्तर में नोट किया है - यह वास्तव में एक बुरी चीज नहीं है कभी-कभी इससे पहले समस्याएं थीं और यह एक सतत फैशन में वास्तविक गुण बनाम विशेषताओं का सही ढंग से समर्थन करती है। –

+0

@ लैंगडन नोट: "लेकिन jQuery माइग्रेट प्लगइन पिछड़ा-संगत व्यवहार प्रदान कर सकता है और अगर यह हस्ताक्षर उपयोग किया जाता है तो चेतावनी देगा।" http://jquery.com/upgrade-guide/1.9/#jquery-attr का उपयोग करने के लिए एक कदम हो सकता है 1.9.1 –

3
if($("#chk").is(":checked")) 
    $("#chk").prop("checked", false); 
else 
    $("#chk").prop("checked", true); 

आप .prop() का उपयोग करना चाहिए और यह भी भी बूलियन साथ निर्दिष्ट किया जा सकता जाँच की।

0
$(document).ready(function() { 

    $("#btn").click(function() { 

    if($("#chk").attr('checked')=='checked') 
     $("#chk").removeAttr("checked"); 
    else 
     $("#chk").attr("checked","checked"); 

    $("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html()); 
    }); 
}); 

आशा है कि आप

संबंधित मुद्दे