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



checkbox selected checked (25)

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

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

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

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

या

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

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


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

$('span.ui-[controlname]',$('[id]')).text("the 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 () जैसे अधिक अद्वितीय नाम देना चाहेंगे।


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

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

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

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

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

Internet Explorer 9 से पहले इंटरनेट एक्सप्लोरर में मेमोरी लीक के बारे में जागरूक रहें, क्योंकि api.jquery.com/prop :

संस्करण 9 से पहले इंटरनेट एक्सप्लोरर में, एक सामान्य आदिम मूल्य (संख्या, स्ट्रिंग, या बूलियन) के अलावा किसी अन्य चीज़ पर किसी DOM तत्व प्रॉपर्टी को सेट करने के लिए .prop () का उपयोग करके संपत्ति को हटाया नहीं जाता है (.removeProp ( )) दस्तावेज़ से डीओएम तत्व हटा दिए जाने से पहले। मेमोरी लीक के बिना डीओएम ऑब्जेक्ट्स पर मूल्यों को सुरक्षित रूप से सेट करने के लिए, .data () का उपयोग करें।


उपयोग:

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

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

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

मुझे समाधान याद आ रहा है। मैं हमेशा उपयोग करूंगा:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

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

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

यहां उदाहरण


तुम कर सकते हो

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

या

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

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

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

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

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

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

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

$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

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');

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

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

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>


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

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

या

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

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

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

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


एकाधिक चेक बॉक्स को जांचने के लिए कोड और डेमो यहां दिया गया है ...

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});

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

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

जैसा कि @ livefree75 ने कहा:

jQuery 1.5.x और नीचे

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

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

लेकिन jQuery के नए संस्करणों में, हमें इस तरह कुछ उपयोग करना होगा:

jQuery 1.6+

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

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

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

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

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

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

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

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


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

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

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

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

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

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;
});

यदि मोबाइल का उपयोग करना है और आप इंटरफ़ेस को अपडेट करना चाहते हैं और चेकबॉक्स को अनचेक के रूप में दिखाना चाहते हैं, तो निम्न का उपयोग करें:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

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

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

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

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

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);

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() विधियों का उपयोग करने का लाभ यह है कि वे सभी मिलान किए गए तत्वों पर काम करेंगे।


चयनित रेडियो का मूल्य प्राप्त करने के लिए जो कक्षा का उपयोग करता है:

$('.class:checked').val()




javascript jquery checkbox selected checked