JavaScript से चेकबॉक्स चेक्ड है या नहीं जांचें

JavaScript का उपयोग करके चेकबॉक्स चेक्ड है या नहीं जांचने का कोड नीचे दिया गया है।

उदाहरण

<!DOCTYPE html> 
<html> 
<head> 
  <h1>चेकबॉक्स चेक होने पर टेक्स्ट बॉक्स दिखाना</h1> 
  चेकबॉक्स: <input type="checkbox" class="check" onclick="checkFunction()" /> 
  <h2 class="textBox" style="display:none">चेकबॉक्स चेक्ड है!!!</h2> 
  <script> 
    document.querySelector(".check").addEventListener("click", checkFunction); 
    function checkFunction() { 
      var checkBox = document.querySelector(".check"); 
      var textBox = document.querySelector(".textBox"); 
      if (checkBox.checked == true) { 
        textBox.style.display = "block"; 
      } else { 
        textBox.style.display = "none"; 
      } 
    } 
  </script> 
</body> 
</html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

चेकबॉक्स पर क्लिक करने पर:

चेकबॉक्स स्टेट चेक करने के तरीके:

const checkbox = document.querySelector('.check');

// 1. .checked प्रॉपर्टी (अनुशंसित)
if (checkbox.checked) { /* चेक्ड है */ }

// 2. :checked स्यूडो-क्लास (CSS में)
input:checked + label { color: green; }

// 3. getAttribute (नहीं अनुशंसित - केवल इनिशियल HTML दिखाता है)
checkbox.getAttribute('checked'); // "checked" या null

// 4. इंडिटरमिनेट स्टेट (ट्राई-स्टेट चेकबॉक्स)
checkbox.indeterminate = true; // विजुअल केवल, .checked पर असर नहीं

इवेंट हैंडलिंग:

बेहतर पैटर्न - change इवेंट:

checkbox.addEventListener('change', (e) => {
  const isChecked = e.target.checked;
  textBox.style.display = isChecked ? 'block' : 'none';
  // या
  textBox.hidden = !isChecked; // hidden एट्रिब्यूट (बेहतर एक्सेसिबिलिटी)
});

मल्टीपल चेकबॉक्स हैंडलिंग:

// सभी चेक्ड चेकबॉक्स प्राप्त करें
const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
const values = Array.from(checkedBoxes).map(cb => cb.value);

// इंडिटरमिनेट (पेरेंट चेकबॉक्स)
const parent = document.getElementById('parent');
const children = document.querySelectorAll('.child');

children.forEach(child => {
  child.addEventListener('change', () => {
    const checked = document.querySelectorAll('.child:checked').length;
    parent.checked = checked === children.length;
    parent.indeterminate = checked > 0 && checked < children.length;
  });
});

एक्सेसिबिलिटी:

• हमेशा <label> के साथ जोड़ें (for एट्रिब्यूट या रैप करके)
• aria-describedby अतिरिक्त निर्देशों के लिए
• कीबोर्ड नेविगेशन: Tab से फोकस, Space से टॉगल