HTML DOM Input Checkbox Object - संपूर्ण गाइड

HTML DOM Input Checkbox Object

HTML DOM Input Checkbox Object HTML दस्तावेज़ में type="checkbox" वाले इनपुट एलिमेंट को दर्शाता है। यह चेकबॉक्स बनाने, एक्सेस करने और उसके सभी attributes को प्रबंधित करने का इंटरफेस प्रदान करता है।

Checkbox Object बनाना

var checkboxObject = document.createElement("input");
checkboxObject.type = "checkbox";

Checkbox Object के Attributes

उदाहरण

चेकबॉक्स का मान "Green" से "Red" में बदलना जब चेकबॉक्स चेक्ड हो (यह उदाहरण value property दर्शाता है):

<!DOCTYPE html>
<html>
<head>
<title>Value Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
  <div> रंग-लाल: <input value="Green" id="formCheckbox" type="checkbox" name="formCheckbox"> </div>
</form>
<button onclick="changeType()">चेकबॉक्स का मान बदलें</button>
<div id="displayDiv"></div>
<script>
  var valueOfInput = document.getElementById("formCheckbox");
  var displayDiv = document.getElementById("displayDiv");
  displayDiv.textContent = 'मान: ' + valueOfInput.value;
  function changeType() {
    if (valueOfInput.value == 'Green' && valueOfInput.checked == true) {
      valueOfInput.value = 'Red';
      displayDiv.textContent = 'मान: ' + valueOfInput.value;
    } else {
      displayDiv.textContent = 'मान को Red में बदलने के लिए चेकबॉक्स चेक करें';
    }
  }
</script>
</body>
</html>

आउटपुट

प्रारंभ में चेकबॉक्स का मान "Green" दिखाता है। बटन क्लिक करने पर यदि चेकबॉक्स चेक्ड है तो मान "Red" में बदल जाता है।

मुख्य बिंदु

• Checkbox Object सभी चेकबॉक्स-संबंधी properties और methods तक पहुंच प्रदान करता है
• document.createElement("input") और type="checkbox" से नया चेकबॉक्स बना सकते हैं
• checked property चेकबॉक्स की वर्तमान स्थिति दर्शाता है (true/false)
• indeterminate property त्रि-स्थिति (चेक्ड, अनचेक्ड, अनिश्चित) के लिए उपयोगी है
• form property से पैरेंट फॉर्म तक पहुंच सकते हैं