सवाल JQuery के साथ चेकबॉक्स के लिए "चेक किया गया" सेट करना?


मैं ऐसा करने के लिए ऐसा कुछ करना चाहता हूं checkbox का उपयोग करते हुए jQuery:

$(".myCheckBox").checked(true);

या

$(".myCheckBox").selected(true);

क्या ऐसी किसी वस्तु का अस्तित्व है?


3606
2018-01-08 22:20


मूल


एक और विशिष्ट (और बहुत उपयोगी!) प्रश्न, "मैं चेकबॉक्स में एक आइटम कैसे चेक करूं-VALUE द्वारा सेट?", मुझे लगता है कि हम यहां भी चर्चा कर सकते हैं, और मैंने नीचे एक उत्तर पोस्ट किया है। - Peter Krauss
यहां jQuery का उपयोग करके ऐसा करने के अन्य तरीकों की जांच करें stackoverflow.com/a/22019103/1868660 - Subodh Ghulaxe
यदि आपको टर्नग्रेड किए गए अपरिवर्तनीय ईवेंट की आवश्यकता है, तो यह है $("#mycheckbox").click(); - HumanInDisguise
"कुछ जांचना" परीक्षण का सुझाव देता है, इसलिए मुझे लगता है कि 'चेकबॉक्स चेक करना' एक और स्पष्ट और बेहतर शीर्षक है। - Alireza
सहारा (); समारोह सही जवाब है। फ़ंक्शन परिभाषा देखें - api.jquery.com/prop - yogihosting


जवाब:


jQuery 1.6+

नया प्रयोग करें .prop() तरीका:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x और नीचे

.prop() विधि उपलब्ध नहीं है, इसलिए आपको उपयोग करने की आवश्यकता है .attr()

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

ध्यान दें कि यह है संस्करण 1.6 से पहले jQuery के यूनिट परीक्षणों द्वारा उपयोग किया जाने वाला दृष्टिकोण और उपयोग करने के लिए बेहतर है

$('.myCheckbox').removeAttr('checked');

चूंकि उत्तरार्द्ध होगा, अगर बॉक्स शुरू में चेक किया गया था, तो कॉल के व्यवहार को बदलें .reset() किसी भी रूप में जिसमें यह शामिल है - एक सूक्ष्म लेकिन शायद अवांछित व्यवहार परिवर्तन।

अधिक संदर्भ के लिए, हैंडलिंग में बदलावों की कुछ अपूर्ण चर्चा checked 1.5.x से 1.6 तक संक्रमण में विशेषता / संपत्ति में पाया जा सकता है संस्करण 1.6 रिलीज नोट्स और यह गुण बनाम गुण के खंड .prop() प्रलेखन

JQuery का कोई संस्करण

यदि आप केवल एक तत्व के साथ काम कर रहे हैं, तो आप हमेशा इसे संशोधित कर सकते हैं HTMLInputElementकी .checked संपत्ति:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

का उपयोग करने के लिए लाभ .prop() तथा .attr() इसके बजाय विधियां यह है कि वे सभी मिलान किए गए तत्वों पर काम करेंगे।


5409
2018-01-08 22:25



@Xian चेक किए गए गुण को हटाकर फ़ॉर्म को रीसेट करना असंभव बनाता है - mcgrailm
एक साइड नोट के रूप में, jQuery 1.6.1 मैंने जो समस्या का उल्लेख किया है उसे ठीक करना चाहिए, इसलिए हम tehcnically सभी अभी भी $ (...) का उपयोग करने के लिए वापस जा सकते हैं। Prop (...) - cwharris
"यदि आप केवल एक तत्व के साथ काम कर रहे हैं, तो यह हमेशा उपयोग करने के लिए सबसे तेज़ होगा DOMElement.checked = true"लेकिन यह नगण्य होगा, क्योंकि यह केवल एक तत्व है ... - Tyler Crompton
जैसा कि टायलर कहते हैं, यह प्रदर्शन में एक नगण्य सुधार है। मेरे लिए, एक सामान्य एपीआई का उपयोग करके कोडिंग देशी एपीआई और jQuery एपीआई मिश्रण करने से अधिक पठनीय बनाता है। मैं jQuery के साथ रहना होगा। - Charlie Kilian
@ टायलर क्रॉम्प्टन - बेशक, यह पूरी तरह प्रदर्शन के बारे में नहीं है, बल्कि कर रहा है $(element).prop('checked') टाइपिंग का एक पूरा अपशिष्ट है। element.checked मौजूद है और उन मामलों में उपयोग किया जाना चाहिए जहां आपके पास पहले से है element - gnarf


उपयोग:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

और यदि आप जांचना चाहते हैं कि चेकबॉक्स चेक किया गया है या नहीं:

$('.myCheckbox').is(':checked');

624
2018-01-08 22:25



चेक करने के लिए चेक किया गया $ (चयनकर्ता) भी चेक किया गया है - eomeroff
मैंने इस सटीक कोड की कोशिश की और यह मेरे लिए किसी भी चयन के मामले में काम नहीं करता / किसी भी चेकबॉक्स का चयन नहीं करता है, जिसे सभी को जांचने और अनचेक करने की आवश्यकता होती है और साथ ही साथ उनके राज्य की जांच भी होती है। इसके बजाय, मैंने @ क्रिस्टोफर हैरिस के जवाब की कोशिश की और यह चाल चल गई। - JD Smith
बस "#mycheckbox" के बजाय "form #mycheckbox" का उपयोग क्यों करें? आईडी पूरे दस्तावेज़ में पहले से ही अद्वितीय है, इसे सीधे चुनने के लिए यह तेज़ और सरल है। - YuriAlbuquerque
@YuriAlbuquerque यह एक उदाहरण था। आप जो भी चयनकर्ता चाहते हैं उसका उपयोग कर सकते हैं। - bchhun
$ (चयनकर्ता)। चेक किया गया काम नहीं करता है। JQuery में कोई 'चेक' विधि नहीं है। - Brendan Byrd


JQuery के साथ चेकबॉक्स को जांचने और अनचेक करने का यह सही तरीका है, क्योंकि यह क्रॉस-प्लेटफ़ॉर्म मानक है, और मर्जी फार्म reposts की अनुमति दें।

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

ऐसा करके, आप चेकबॉक्स को चेक और अनचेक करने के लिए जावास्क्रिप्ट मानकों का उपयोग कर रहे हैं, इसलिए कोई भी ब्राउज़र जो चेकबॉक्स तत्व की "चेक" संपत्ति को सही ढंग से लागू करता है, इस कोड को बेकार ढंग से चलाएगा। इस चाहिए सभी प्रमुख ब्राउज़रों बनें, लेकिन मैं पिछले इंटरनेट एक्सप्लोरर 9 का परीक्षण करने में असमर्थ हूं।

समस्या (jQuery 1.6):

एक बार जब उपयोगकर्ता चेकबॉक्स पर क्लिक करता है, तो वह चेकबॉक्स "चेक किए गए" विशेषता परिवर्तनों का जवाब देना बंद कर देता है।

किसी के पास नौकरी करने में विफल होने वाले चेकबॉक्स विशेषता का एक उदाहरण यहां दिया गया है क्लिक किया चेकबॉक्स (यह क्रोम में होता है)।

बेला

समाधान:

जावास्क्रिप्ट की "चेक" संपत्ति का उपयोग करके डोम तत्व, हम डीओएम में जो कुछ भी कर रहे हैं, उसे कुशल बनाने की कोशिश करने के बजाय, सीधे समस्या को हल करने में सक्षम हैं चाहते हैं ऐसा करने के लिए

बेला

यह प्लगइन jQuery द्वारा चुने गए किसी भी तत्व की चेक की गई संपत्ति को बदल देगा, और सभी परिस्थितियों में चेकबॉक्स को सफलतापूर्वक जांच और अनचेक कर देगा। इसलिए, यह एक अति-असर समाधान की तरह प्रतीत हो सकता है, यह आपकी साइट के उपयोगकर्ता अनुभव को बेहतर बनाएगा, और उपयोगकर्ता निराशा को रोकने में मदद करेगा।

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

वैकल्पिक रूप से, यदि आप प्लगइन का उपयोग नहीं करना चाहते हैं, तो आप निम्न कोड स्निपेट का उपयोग कर सकते हैं:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

284
2018-05-06 19:31



आपके पहले JSFiddle उदाहरण में आपको उपयोग करना चाहिए removeAttr('checked') बजाय attr('checked', false) - Daniel X Moore
@DanielXMoore, आप इस मुद्दे के चारों ओर स्कर्ट कर रहे हैं। उदाहरण यह दिखाने के लिए था कि एक बार चेक-बॉक्स उपयोगकर्ता द्वारा क्लिक किया गया था, ब्राउज़र अब जवाब नहीं देता है checkedविशेषता परिवर्तन, परवाह किए बिना उन्हें बदलने के लिए इस्तेमाल विधि का। - cwharris
@ क्रिस्टोफर हैरिस ठीक है, तुम सही हो, मुझे याद आया। JQuery 1.6 के रूप में आप .prop विधि का उपयोग नहीं करना चाहिए?$('.myCheckBox').prop('checked', true) इस तरह यह स्वचालित रूप से मिलान किए गए तत्वों के पूरे सेट पर लागू होगा (केवल तभी सेट करते समय, केवल पहले ही प्राप्त करना) - Daniel X Moore
हाँ। prop निश्चित रूप से तत्व पर गुण सेट करने का उचित तरीका है। - cwharris
अच्छा थोड़ा प्लगइन, धन्यवाद! चेनबिलिटी को बनाए रखने के लिए, प्लगइन के अंत से पहले "इसे वापस करें" जोड़ें। - JD Smith


तुम कर सकते हो

$('.myCheckbox').attr('checked',true) //Standards compliant

या

$("form #mycheckbox").attr('checked', true)

यदि आपके पास उस चेकबॉक्स के लिए ऑनक्लिक ईवेंट में कस्टम कोड है जिसे आप आग लगाना चाहते हैं, तो इसके बजाय इसका उपयोग करें:

$("#mycheckbox").click();

आप पूरी तरह से विशेषता को हटाकर अनचेक कर सकते हैं:

$('.myCheckbox').removeAttr('checked')

आप इस तरह के सभी चेकबॉक्स देख सकते हैं:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

130
2018-01-08 22:24



आप $ ("# myTable इनपुट: चेकबॉक्स") भी जा सकते हैं। प्रत्येक (...); - Chris Brandsma
आप भी जा सकते हैं $(".myCheckbox").click() - RobertPitt
@Michah चेक किए गए गुण को हटाकर फ़ॉर्म को रीसेट करना असंभव बनाता है - mcgrailm
यह उत्तर पुराना है क्योंकि यह उपयोग करता है .attr के बजाय .prop। - Blazemonger
$("#mycheckbox").click(); मेरे लिए काम किया क्योंकि मैं भी घटना को बदल रहा था और .attr और .prop परिवर्तन घटना आग नहीं था। - Damodar Bashyal


आप नई विधियों के साथ $ .fn ऑब्जेक्ट भी बढ़ा सकते हैं:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

तो आप बस कर सकते हैं:

$(":checkbox").check();
$(":checkbox").uncheck();

या यदि आप उन नामों का उपयोग करने वाली किसी अन्य लाइब्रेरी का उपयोग करते हैं तो आप उन्हें mycheck () और myuncheck () जैसे अधिक अद्वितीय नाम देना चाहेंगे।


67
2017-08-20 18:19



@ livfree75 चेक किए गए विशेषता को हटाने से फ़ॉर्म को रीसेट करना असंभव हो जाता है - mcgrailm
यह उत्तर पुराना है क्योंकि यह उपयोग करता है .attr के बजाय .prop। - Blazemonger


$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

आखिरी व्यक्ति चेकबॉक्स के लिए क्लिक इवेंट को फायर करेगा, अन्य लोग नहीं करेंगे। तो यदि आपके पास उस चेकबॉक्स के लिए ऑनक्लिक ईवेंट में कस्टम कोड है जिसे आप आग लगाना चाहते हैं, तो अंतिम का उपयोग करें।


58
2018-01-08 22:36



शीर्ष एक असफल हो जाएगा ... चेक एक jquery ऑब्जेक्ट सदस्य नहीं है - redsquare
यह उत्तर पुराना है क्योंकि यह उपयोग करता है .attr के बजाय .prop। - Blazemonger


एक चेकबॉक्स जांचने के लिए आपको उपयोग करना चाहिए

 $('.myCheckbox').attr('checked',true);

या

 $('.myCheckbox').attr('checked','checked');

और एक चेक बॉक्स को अनचेक करने के लिए आपको इसे हमेशा गलत पर सेट करना चाहिए:

 $('.myCheckbox').attr('checked',false);

यदि तुम करो

  $('.myCheckbox').removeAttr('checked')

यह विशेषता को एक साथ हटा देता है और इसलिए आप फॉर्म को रीसेट करने में सक्षम नहीं होंगे।

बादा डेमो jQuery 1.6। मुझे लगता है कि यह टूटा हुआ है। 1.6 के लिए मैं उस पर एक नई पोस्ट करने जा रहा हूं।

नया काम डेमो jQuery 1.5.2 क्रोम में काम करता है।

दोनों डेमो का उपयोग करें

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

56
2018-03-23 15:22



यह गलत है। 'चेक' विशेषता को '' पर सेट करेगा नहीं कम से कम क्रोम में चेक बॉक्स अनचेक करें। - cwharris
@xixonia मैंने आपके फिडल को पोस्ट करने से पहले परीक्षण किया है काम नहीं करता है क्योंकि आपने jquery को शामिल करने के लिए बाईं ओर मेनू नहीं बदला है - mcgrailm
mcgralim - 1.6 में यह भी आसान है .... $(".mycheckbox").prop("checked", true/false) - gnarf
@ मार्कआमेरी आपने उल्लेख किया कि मेरी पोस्ट ने पोस्ट के समय कुछ भी नहीं जोड़ा लेकिन यह सटीक है। यदि आप स्वीकृत उत्तर के इतिहास को देखते हैं तो आप पाएंगे कि वे तत्व को हटाने का सुझाव देते हैं। जो फॉर्म को रीसेट करना असंभव बनाता है, यही कारण है कि मैंने शुरुआत करने के लिए पोस्ट किया था। - mcgrailm
@mcgrailm मैं आगे बढ़ गया हूं और आपकी टिप्पणियों के प्रकाश में स्वीकृत उत्तर संशोधित कर दिया है। यदि आप इस पर नजर डालना चाहते हैं और जांचें कि यह वर्तमान स्थिति में अच्छा दिखता है, तो मैं इसकी सराहना करता हूं। मेरी आलोचना फिर से तेज आलोचना की पेशकश करने के लिए, कम से कम कुछ हिस्सों में, बहुत गुमराह थी। - Mark Amery