Onclick / onchange घटनाओं से HTML चेकबॉक्स का मूल्य प्राप्त करना

Question

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />

भीतर onClickHandlerऔर / या onChangeHandler, मैं यह कैसे निर्धारित कर सकता हूं कि चेकबॉक्स की नई स्थिति क्या है?

Answer 1

संक्षिप्त उत्तर:

clickईवेंट का उपयोग करें , जो मूल्य अपडेट होने के बाद तक फायर नहीं करेगा, और जब आप चाहें तब आग:

<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>

function handleClick(cb) {
  display("Clicked, new value = " + cb.checked);
}

लाइव उदाहरण | स्रोत

लंबा जवाब:

changeईवेंट हैंडलर नहीं बुलाया जाता है जब तक checkedराज्य अद्यतन किया गया है ( लाइव उदाहरण | स्रोत ) है, लेकिन क्योंकि (टिम Büthe टिप्पणी में बताते हैं) आईई आग नहीं करता changeघटना जब तक चेकबॉक्स फोकस खो देता है, आप नहीं मिलता अधिसूचना लगातार। आईई के साथ इससे भी बदतर, अगर आप इसे अपडेट करने के लिए चेकबॉक्स (चेकबॉक्स के बजाय) के लिए एक लेबल पर क्लिक करते हैं, तो आप यह मान सकते हैं कि आपको पुराना मूल्य मिल रहा है (लेबल पर क्लिक करके IE के साथ प्रयास करें: लाइव उदाहरण | स्रोत )। ऐसा इसलिए है क्योंकि यदि चेकबॉक्स में फ़ोकस है, तो लेबल पर क्लिक करने से फ़ोकस उस पर से हट जाता है, changeपुराने मान के साथ घटना को निकालता है , और फिरclickनया मान सेट करने और चेकबॉक्स पर वापस ध्यान केंद्रित करने के लिए होता है। बहुत ज्यादा उलझन।

लेकिन अगर आप clickइसके बजाय उपयोग करते हैं तो आप उस सभी अप्रियता से बच सकते हैं ।

मैंने DOM0 हैंडलर ( onxyzविशेषताएँ) का उपयोग किया है, क्योंकि आपने जो इसके बारे में पूछा है, लेकिन रिकॉर्ड के लिए, मैं आमतौर पर कोडर्स (DOM2's addEventListener, या attachEventIE के पुराने संस्करणों में) का उपयोग करने के बजाए कोड में हुकिंग करने की सलाह दूंगा onxyz। यह आपको एक ही तत्व के लिए कई हैंडलर संलग्न करने देता है और आपको अपने सभी हैंडलर को वैश्विक कार्य करने से रोकता है।

---

इस उत्तर के एक पुराने संस्करण ने इस कोड का उपयोग किया है handleClick:

function handleClick(cb) {
  setTimeout(function() {
    display("Clicked, new value = " + cb.checked);
  }, 0);
}

ऐसा लगता है कि मूल्य को देखने से पहले क्लिक को पूरा करने की अनुमति दी गई थी। जहाँ तक मुझे पता है, ऐसा करने का कोई कारण नहीं है, और मुझे नहीं पता कि मैंने ऐसा क्यों किया। clickहैंडलर कहे जाने से पहले मान बदल दिया जाता है। वास्तव में, उस बारे में कल्पना बिल्कुल स्पष्ट है । संस्करण के बिना setTimeoutहर ब्राउज़र में पूरी तरह से अच्छी तरह से काम करता है जो मैंने कोशिश की है (यहां तक ​​कि IE6)। मैं केवल यह मान सकता हूं कि मैं किसी अन्य प्लेटफ़ॉर्म के बारे में सोच रहा था जहां परिवर्तन घटना के बाद तक नहीं हुआ है। किसी भी स्थिति में, HTML चेकबॉक्स के साथ ऐसा करने का कोई कारण नहीं है।

Comments

सौभाग्य से onchangeसही ढंग से काम करता है +IE9। स्रोत

— मोरी

यहाँ मेरे 2 सेंट जोड़ना: ऐसा लगता है कि IE8 (और नीचे, मुझे लगता है), एक क्लिक डाउन और एक क्लिक रिलीज के बीच अंतर करता है ... और इस कारण कि हम इस पृष्ठ पर हैं क्योंकि यह क्लिक के बजाय नीचे क्लिक करने पर फायर करता है छोड़ें। चेकबॉक्स जैसे लगता है कि केवल एक क्लिक रिलीज पर सक्रिय होता है - नीचे क्लिक करना और फिर माउस ले जाना एक क्लिक को पंजीकृत करेगा, लेकिन चेकबॉक्स को संशोधित नहीं करेगा।

— dah97765

ऐसा लगता है कि कीबोर्ड नेविगेशन ( tab+ space) के माध्यम से चेकबॉक्स को टॉगल करना भी onclickहैंडलर को ट्रिगर करेगा (क्रोम 51 में सत्यापित है, कम से कम)।

— नैट व्हिटेकर

उस पर क्लिक करने पर उस चेकबॉक्स का मान कैसे मिलेगा ??

— user7350714

Answer 2

React.js के लिए, आप इसे अधिक पठनीय कोड के साथ कर सकते हैं। आशा करता हूँ की ये काम करेगा।

handleCheckboxChange(e) {
  console.log('value of checkbox : ', e.target.checked);
}
render() {
  return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}

Answer 3

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

<input type="checkbox" onclick="onClickHandler()" id="box" />

<script>
function onClickHandler(){
    var chk=document.getElementById("box").value;

    //use this value

}
</script>