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




checkbox selected (20)

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() में बदलें - इसमें एक सूक्ष्म लेकिन शायद अवांछित व्यवहार परिवर्तन होता है।

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

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

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

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

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

https://code.i-harness.com

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

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

या

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

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


JQuery 1.6+ के लिए

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

JQuery 1.5.x और नीचे के लिए

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

जाँच करने के लिए,

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

JQuery के बिना इसे करने का एक तरीका यहां है

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>


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

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

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

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

समस्या (jQuery 1.6):

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

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

Fiddle

समाधान:

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

Fiddle

यह प्लगइन 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;
});

आप नई विधियों के साथ $ .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 () जैसे अधिक अद्वितीय नाम देना चाहेंगे।


इसे इस्तेमाल करे:

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking

एक और संभावित समाधान:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

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

 $('.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');
    }
});

जब आपने चेकबॉक्स चेक किया था;

$('.className').attr('checked', 'checked')

यह पर्याप्त नहीं हो सकता है। आपको नीचे दिए गए फ़ंक्शन को भी कॉल करना चाहिए;

$('.className').prop('checked', 'true')

खासकर जब आपने चेकबॉक्स चेक किए गए गुण को हटा दिया।


जांचने और अनचेक करने के लिए

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

तुम कर सकते हो

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

या

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

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

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

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

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

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

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

मान लीजिए कि सवाल है ...

मैं चेकबॉक्स-सेट VALUE द्वारा कैसे सेट करूं?

याद रखें कि एक सामान्य चेकबॉक्स सेट में, सभी इनपुट टैगों का एक ही नाम होता है, वे विशेषता value भिन्न होते हैं: सेट के प्रत्येक इनपुट के लिए कोई आईडी नहीं होती है।

कोड की निम्न पंक्ति का उपयोग करते हुए जियान का उत्तर एक और विशिष्ट चयनकर्ता के साथ बढ़ाया जा सकता है:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

मैं इसका उपयोग कर काम नहीं कर सका:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

सच और गलत दोनों चेकबॉक्स की जांच करेंगे। मेरे लिए क्या काम किया गया था:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

यदि आप PhoneGap अनुप्रयोग विकास कर रहे हैं, और आपके पास उस बटन पर एक मूल्य है जिसे आप तुरंत दिखाना चाहते हैं, तो ऐसा करना याद रखें

$('span.ui-[controlname]',$('[id]')).text("the value");

मैंने पाया कि अवधि के बिना, इंटरफ़ेस अपडेट नहीं करेगा चाहे आप क्या करें।


यह उन तत्वों का चयन करता है जिनमें दिए गए सबस्ट्रिंग "ckbItem" वाले मान के साथ निर्दिष्ट विशेषता है:

$('input[name *= ckbItem]').prop('checked', true);

यह उन सभी तत्वों का चयन करेगा जिनमें ckbItem को इसके नाम विशेषता में शामिल किया गया है।


यह शायद सबसे छोटा और आसान समाधान है:

$(".myCheckBox")[0].checked = true;

या

$(".myCheckBox")[0].checked = false;

यहां तक ​​कि छोटा होगा:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

यहां एक jsFiddle भी है।


सादा जावास्क्रिप्ट बहुत सरल और बहुत कम ओवरहेड है:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

यहां उदाहरण


हम गुण की जांच के लिए jQuery के साथ elementObject उपयोग कर सकते हैं:

$(objectElement).attr('checked');

हम बिना किसी त्रुटि के सभी jQuery संस्करणों के लिए इसका उपयोग कर सकते हैं।

अद्यतन: Jquery 1.6+ में नई प्रोप विधि है जो attr को प्रतिस्थापित करती है, उदाहरण के लिए:

$(objectElement).prop('checked');

JQuery 1.6 या उच्चतम का उपयोग कर चेकबॉक्स को चेक करने के लिए बस यह करें:

checkbox.prop('checked', true);

अनचेक करने के लिए, उपयोग करें:

checkbox.prop('checked', false);

JQuery का उपयोग करके चेकबॉक्स टॉगल करने के लिए यहां मैं क्या उपयोग करना चाहता हूं:

checkbox.prop('checked', !checkbox.prop('checked'));

यदि आप jQuery 1.5 या निम्न का उपयोग कर रहे हैं:

checkbox.attr('checked', true);

अनचेक करने के लिए, उपयोग करें:

checkbox.attr('checked', false);

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

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





checked