जावास्क्रिप्ट के साथ चेक / अनचेक करें चेकबॉक्स (jQuery या वेनिला)?

Question

जावास्क्रिप्ट, jQuery या वेनिला का उपयोग करके एक चेकबॉक्स को कैसे चेक / अनचेक किया जा सकता है?

Comments

जावास्क्रिप्ट का उपयोग करके चेकबॉक्स

— Mauris

Answer 1

जावास्क्रिप्ट:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check
$("#checkbox").prop("checked", true);

// Uncheck
$("#checkbox").prop("checked", false);

jQuery (1.5-):

// Check
$("#checkbox").attr("checked", true);

// Uncheck
$("#checkbox").attr("checked", false);

Comments

.Prop का उपयोग करना स्थानीय रूप से होस्ट की गई फ़ाइलों के साथ फ़ायरफ़ॉक्स में Jquery 1.11.2 के साथ काम नहीं करता है। .attr करता है। मैंने अधिक पूरी तरह से परीक्षण नहीं किया है। यहाँ कोड है: `` personContent.find ("[data-name = '" + pass.name + "]]") बच्चे। (' इनपुट ')। attr (' जाँच ', सत्य); `` `

— एंड्रयू डाउन

क्या हमें इसका उपयोग करना चाहिए attrया prop?

— ब्लैक

जाहिरा तौर पर .checked = true/falseइस changeघटना को ट्रिगर नहीं करता है : - \

— पत्ती

@ अल्बर्ट: आपने सख्त समानता परीक्षणों के लिए असाइनमेंट क्यों बदले? तुमने उत्तर तोड़ दिया।

— मार्टिन पीटर्स

तुम सही हो। यह पूरी तरह से मेरा बुरा है। इस बारे में खेद है

— अल्बर्ट

Answer 2

महत्वपूर्ण व्यवहार जिसका उल्लेख अभी तक नहीं किया गया है:

चेक किए गए विशेषता को प्रोग्रामेटिक रूप से सेट करते changeहुए, चेकबॉक्स की घटना को फायर नहीं करता है ।

इस फिडेल में अपने लिए देखें:
http://jsfiddle.net/fjaeger/L9z9t04p/4/

(क्रोम 46, फ़ायरफ़ॉक्स 41 और IE 11 में फिडेल परीक्षण)

click()विधि

किसी दिन आप अपने आप को कोड लिख सकते हैं, जो उस घटना पर निर्भर करता है जिसे निकाल दिया जाता है। यह सुनिश्चित करने के लिए कि ईवेंट फायर हो रहा है, click()चेकबॉक्स तत्व की विधि को इस तरह से कॉल करें:

document.getElementById('checkbox').click();

हालांकि, इस चेकबॉक्स की जाँच की स्थिति को टॉगल करता है, बजाय विशेष रूप से इसे करने के लिए स्थापित करने की trueया false। याद रखें कि changeघटना केवल आग होनी चाहिए, जब जाँच की गई विशेषता वास्तव में बदलती है।

यह jQuery के तरीके पर भी लागू होता है: विशेषता का उपयोग करके सेटिंग करना , propया घटना को attrआग नहीं देना change।

checkedकिसी विशिष्ट मान पर सेट करना

विधि को checkedकॉल करने से पहले आप विशेषता का परीक्षण कर सकते हैं click()। उदाहरण:

function toggle(checked) {
  var elm = document.getElementById('checkbox');
  if (checked != elm.checked) {
    elm.click();
  }
}

यहां क्लिक विधि के बारे में और पढ़ें:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Comments

यह एक अच्छा जवाब है, लेकिन व्यक्तिगत रूप से मैं क्लिक () पर कॉल करने के बजाय परिवर्तन की घटना को आग देना पसंद करूंगा elm.dispatchEvent(new Event('change'));

— विक्टर शारोवतोव

@VictorSharovatov आप परिवर्तन की घटना को क्यों प्राथमिकता देना चाहेंगे?

— पीटरको

मैं केवल आंशिक रूप से सहमत हो सकता हूं - AdBlocks के साथ कई वेब ब्राउज़र वर्चुअल क्लिकिंग से DOM का बचाव कर रहे हैं () विज्ञापनों से अवांछित क्रियाओं के कारण

— pkolawa

@PeterCo: संभवत: क्योंकि यह अधिक स्पष्ट रूप से इरादे को चित्रित करता है - परिवर्तन की घटना को आग देने के लिए तत्व पर क्लिक करें बनाम एक परिवर्तन घटना को आग देने के लिए एक परिवर्तन घटना को आगाह करें - प्रत्यक्ष (अप्रत्यक्ष ट्रिगर परिवर्तन) बनाम प्रत्यक्ष। उत्तरार्द्ध काफी हद तक स्पष्ट है और पाठक को यह जानने की आवश्यकता नहीं है कि एक क्लिक से बदलाव होता है।

— बिल डग्ग

Answer 3

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

document.getElementById("id-of-checkbox").checked = true;

अनचेक करने के लिए:

document.getElementById("id-of-checkbox").checked = false;

Comments

यह केवल जाँच की गई विशेषता को बदल देगा। हालांकि, ऑनक्लिक और इसी तरह की घटनाओं को ट्रिगर नहीं किया जाएगा।

— पॉल स्टेलियन

Answer 4

हम एक कण चेकबॉक्स की जाँच कर सकते हैं,

$('id of the checkbox')[0].checked = true

और द्वारा अनचेक करें,

$('id of the checkbox')[0].checked = false

Comments

यदि आप केवल एक तत्व का चयन कर रहे हैं तो आपको वास्तव में सरणी सूचकांक की आवश्यकता नहीं है। लेकिन मुझे लगता है कि अगर आप स्पष्ट होना चाहते हैं। हाहा

— रिजोव्स्की

@Rizowski आपको मूल html तत्व प्राप्त करने के लिए इंडेक्स की आवश्यकता है - jQuery ऑब्जेक्ट्स में "चेक की गई" संपत्ति नहीं है

— हेनरिक क्रिस्टेंसेन

इसने मेरे लिए काम किया है। सरणी इंडेक्स के बिना, मुझे अपरिभाषित त्रुटि मिल रही थी। बहुत बहुत धन्यवाद, मेरा दिन बचाया।

— नेरी

Answer 5

मैं ध्यान देना चाहूंगा, कि 'चेक' किए गए एट्रिब्यूट को नॉन-खाली स्ट्रिंग पर सेट करने से चेक बॉक्स बन जाता है।

इसलिए यदि आप "झूठी" विशेषता को "गलत" पर सेट करते हैं , तो चेकबॉक्स की जाँच की जाएगी। मैं खाली स्ट्रिंग, करने के लिए मान सेट करने के लिए किया था अशक्त या बुलियन मान गलत आदेश सुनिश्चित करें चेकबॉक्स चेक नहीं किया गया था बनाने के लिए।

Comments

ऐसा इसलिए है क्योंकि एक गैर-रिक्त स्ट्रिंग को सत्य माना जाता है।

— जेम्स कोयल

Answer 6

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

//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');

//UnCheck
document.getElementById('chk').removeAttribute('checked');

Answer 7

<script type="text/javascript">
    $(document).ready(function () {
        $('.selecctall').click(function (event) {
            if (this.checked) {
                $('.checkbox1').each(function () {
                    this.checked = true;
                });
            } else {
                $('.checkbox1').each(function () {
                    this.checked = false;
                });
            }
        });

    });

</script>

Answer 8

function setCheckboxValue(checkbox,value) {
    if (checkbox.checked!=value)
        checkbox.click();
}

Answer 9

यदि किसी कारण के लिए, आप नहीं करने के लिए एक चलाना चाहते हैं (नहीं कर सकते हैं या) .click()चेकबॉक्स तत्व पर, तो आप बस अपने मूल्य सीधे अपने .checked संपत्ति (एक के माध्यम से बदल सकते हैं आईडीएल विशेषता के <input type="checkbox">)।

ध्यान दें कि ऐसा करने से सामान्य रूप से संबंधित घटना ( परिवर्तन) नहीं होती है ) में इसलिए आपको मैन्युअल रूप से आग लगाने की आवश्यकता होगी जो कि किसी भी संबंधित इवेंट हैंडलर के साथ काम करता है।

यहाँ कच्ची जावास्क्रिप्ट (ES6) में एक कार्यात्मक उदाहरण दिया गया है:

class ButtonCheck {
  constructor() {
    let ourCheckBox = null;
    this.ourCheckBox = document.querySelector('#checkboxID');

    let checkBoxButton = null;
    this.checkBoxButton = document.querySelector('#checkboxID+button[aria-label="checkboxID"]');

    let checkEvent = new Event('change');
    
    this.checkBoxButton.addEventListener('click', function() {
      let checkBox = this.ourCheckBox;

      //toggle the checkbox: invert its state!
      checkBox.checked = !checkBox.checked;

      //let other things know the checkbox changed
      checkBox.dispatchEvent(checkEvent);
    }.bind(this), true);

    this.eventHandler = function(e) {
      document.querySelector('.checkboxfeedback').insertAdjacentHTML('beforeend', '<br />Event occurred on checkbox! Type: ' + e.type + ' checkbox state now: ' + this.ourCheckBox.checked);

    }


    //demonstration: we will see change events regardless of whether the checkbox is clicked or the button

    this.ourCheckBox.addEventListener('change', function(e) {
      this.eventHandler(e);
    }.bind(this), true);

    //demonstration: if we bind a click handler only to the checkbox, we only see clicks from the checkbox

    this.ourCheckBox.addEventListener('click', function(e) {
      this.eventHandler(e);
    }.bind(this), true);


  }
}

var init = function() {
  const checkIt = new ButtonCheck();
}

if (document.readyState != 'loading') {
  init;
} else {
  document.addEventListener('DOMContentLoaded', init);
}

<input type="checkbox" id="checkboxID" />

<button aria-label="checkboxID">Change the checkbox!</button>

<div class="checkboxfeedback">No changes yet!</div>

यदि आप इसे चलाते हैं और चेकबॉक्स और बटन दोनों पर क्लिक करते हैं, तो आपको यह महसूस करना चाहिए कि यह कैसे काम करता है।

ध्यान दें कि मैंने संक्षिप्तता / सरलता के लिए document.querySelector का उपयोग किया था, लेकिन इसे आसानी से बनाया जा सकता है या तो किसी दिए गए आईडी को कंस्ट्रक्टर को पास कर दिया जाए, या यह सभी बटन पर लागू हो सकता है जो चेकबॉक्स के लिए एरिया-लेबल के रूप में कार्य करता है (ध्यान दें कि मैं बटन पर एक आईडी सेट करने और चेकबॉक्स को एरिया-लेबेलबी देने से परेशान नहीं हुआ, जो कि इस पद्धति का उपयोग करते समय किया जाना चाहिए) या इसे विस्तारित करने के लिए किसी भी अन्य तरीके की संख्या। अंतिम दो addEventListenerएस केवल यह प्रदर्शित करने के लिए हैं कि यह कैसे काम करता है।

Answer 10

एकल जाँच के लिए प्रयास करें

myCheckBox.checked=1

<input type="checkbox" id="myCheckBox"> Call to her

बहु कोशिश के लिए

document.querySelectorAll('.imChecked').forEach(c=> c.checked=1)

Buy wine: <input type="checkbox" class="imChecked"><br>
Play smooth-jazz music: <input type="checkbox"><br>
Shave: <input type="checkbox" class="imChecked"><br>

Answer 11

मैं वर्तमान उत्तरों से सहमत हूं, लेकिन मेरे मामले में यह काम नहीं करता है, मुझे उम्मीद है कि यह कोड भविष्य में किसी की मदद करेगा:

// check
$('#checkbox_id').click()