रेडियो बटन के लिए OnChange घटना हैंडलर (INPUT प्रकार = "रेडियो") एक मूल्य के रूप में काम नहीं करता है

190

मैं इसके लिए एक सामान्यीकृत समाधान की तलाश कर रहा हूं।

एक ही नाम के साथ 2 रेडियो प्रकार के इनपुट पर विचार करें। प्रस्तुत होने पर, जो चेक किया जाता है वह उस मान को निर्धारित करता है जो फॉर्म के साथ भेजा जाता है:

<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />

जब रेडियो बटन को डी-सेलेक्ट किया जाता है तो परिवर्तन की घटना में आग नहीं लगती है। इसलिए यदि मान वाला रेडियो = "1" पहले से ही चुना गया है और उपयोगकर्ता दूसरे का चयन करता है, तो handleChange1 () नहीं चलता है। यह एक समस्या प्रस्तुत करता है (वैसे भी मेरे लिए) इसमें कोई घटना नहीं है जहां मैं इस डी-चयन को पकड़ सकता हूं।

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

मुझे यकीन है कि आप में से कुछ पहले इस समस्या में भाग चुके हैं। कुछ वर्कअराउंड क्या हैं (या आदर्श रूप से इसे संभालने का सही तरीका क्या है)? मैं केवल परिवर्तन की घटना को पकड़ना चाहता हूं, पहले से चेक किए गए रेडियो के साथ-साथ नए चेक किए गए रेडियो तक पहुंचना चाहता हूं।

PS
ऑनक्लिक एक रेडियो की जाँच करने पर इंगित करने के लिए एक बेहतर (क्रॉस-ब्राउज़र) घटना की तरह लगता है, लेकिन यह अभी भी अन-चेक की गई समस्या को हल नहीं करता है।

मुझे लगता है कि यह समझ में आता है कि चेकबॉक्स प्रकार के लिए onchange एक मामले में इस तरह से काम करता है क्योंकि यह उस मूल्य को बदलता है जब आप इसे चेक या अन-चेक करते हैं। काश रेडियो बटन एक सेलेक्ट एलिमेंट के ऑनक्रास की तरह व्यवहार करते लेकिन आप क्या कर सकते हैं ...

javascript html cross-browser

— मैथ्यू
स्रोत

179

var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}

<form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form>

स्निपेट का विस्तार करें

यहाँ एक JSFiddle डेमो है: https://jsfiddle.net/crp6em1z/

— मीकल
स्रोत

4

सिर्फ इस बात पर ध्यान दें कि मैंने इसे सही उत्तर के रूप में क्यों चुना है: वर्तमान में चयनित रेडियो रखने myRadiosवाले चर को पढ़ने के लिए नाम विशेषता के साथ प्रत्येक रेडियो बटन पर क्लिक इवेंट हैंडलर स्थापित किए जाते हैं prev। प्रत्येक क्लिक हैंडलर के भीतर एक तुलना यह तय करने के लिए की जाती है कि क्या क्लिक किया गया रेडियो वही है जिसमें कोई संग्रहीत है prevऔर यदि नहीं तो वर्तमान में क्लिक किया गया रेडियो वहां संग्रहीत है। क्लिक हैंडलर के भीतर, आपके पास पहले से चयनित: prevऔर वर्तमान में चयनित रेडियो तक पहुंच है :this

— मैथ्यू

26

लूप के बाहर फ़ंक्शन को कैश करना बेहतर होगा, ताकि सभी रेडियो एक ही ईवेंट हैंडलर को साझा करें (अब उनके समान हैंडलर हैं लेकिन वे अलग-अलग फ़ंक्शन हैं)। या हो सकता है कि सभी रैपर को एक रैपर के अंदर रखा जाए और इवेंट डेलिगेशन का इस्तेमाल किया जाए

— ओरिओल

1

@ ओरियल, या कोई जानकार, क्या आप (1) लूप के बाहर कैशिंग या (2) रैपर + ईवेंट डेलिगेशन का उदाहरण दे सकते हैं?

— मैट वोडा

10

@MattVoda बिना अनुकूलन के । इवेंट श्रोता को साझा करना । इवेंट डेलिगेशन के साथ

— ओरियल

14

onclick कीबोर्ड के चयन के साथ काम नहीं करता है, आप इसका उपयोग कर सकते हैं rad[i].addEventListener('change', function(){ //your handler code })और यह माउस और कीबोर्ड दोनों के लिए काम करेगा

— Juanmi Rodriguez

117

मैं दो बदलाव करूंगा:

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

के onclickबजाय हैंडलर का उपयोग करें onchange- आप रेडियो इनपुट के "चेक किए गए राज्य" को बदल रहे हैं, न कि value, इसलिए कोई परिवर्तन नहीं हो रहा है।
एकल फ़ंक्शन का उपयोग करें, और thisएक पैरामीटर के रूप में पास करें , जिससे यह जांचना आसान हो जाएगा कि वर्तमान में कौन सा मूल्य चुना गया है।

ईटीए: अपने handleClick()फ़ंक्शन के साथ , आप पृष्ठ-स्कोप किए गए चर में रेडियो के मूल / पुराने मूल्य को ट्रैक कर सकते हैं। अर्थात्:

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

स्निपेट का विस्तार करें

— नैट कुक
स्रोत

धन्यवाद, हालांकि यह पिछले चेक किए गए रेडियो को प्राप्त करने के मुद्दे को संबोधित नहीं करता है और आप कुछ ऐसा भी कह रहे हैं जो अन्य उपयोगकर्ताओं ने पहले ही उल्लेख किया है जो "ऑनकॉन्ग" के बजाय "ऑनक्लिक" का उपयोग करना है। मैं वास्तव में शुरू से ही यह जानता था लेकिन मैं इस तथ्य पर ध्यान आकर्षित करना चाहता था कि ऑनक्रॉस काम नहीं करता जैसा कि कोई उम्मीद कर सकता है और मैं इसे बेहतर तरीके से संभालना चाहूंगा।

— मैथ्यू

1

आप जावास्क्रिप्ट का उपयोग कर रहे हैं, है ना? तो क्यों न केवल एक चर बनाए रखा जाए जो अंतिम ज्ञात रेडियो बटन को संग्रहीत करता है? यदि आप किसी एकल हैंडलर का उपयोग कर रहे हैं, तो नए मूल्य के साथ इसे अधिलेखित करने से पहले आप इस संग्रहीत मूल्य की जांच कर सकते हैं। +1

— jmort253

13

@ मैथ्यू: onclickहैंडलर को बस खराब तरीके से नाम दिया गया है - यह एक बटन को दबाता है, चाहे वह बटन क्लिक किया गया हो, स्पर्श किया गया हो, या कीबोर्ड पर "एंटर" करके सक्रिय किया गया हो। onchangeहैंडलर इस मामले में उचित नहीं है के बाद से इनपुट के मूल्य में परिवर्तन नहीं करता, केवल जाँच / अनियंत्रित विशेषता। मैंने पिछले मान को संबोधित करने के लिए एक उदाहरण स्क्रिप्ट जोड़ी है।

— नैट कुक

1

यदि उपयोगकर्ता रेडियो का चयन करने के लिए कीबोर्ड (टैब + स्पेसबार) का उपयोग करता है (और यह बड़े रूपों पर सामान्य अभ्यास है) तो "ऑनक्लिक" ईवेंट को हैंडल नहीं करेगा।

— होल्डऑफ ह्यूंगर

+1। ReactJS में "onChange ()" एक आग्नेय घटना नहीं है और यह एकमात्र समाधान है। स्रोत: github.com/facebook/react/issues/1471

— HoldOffHunger

42

जैसा कि आप इस उदाहरण से देख सकते हैं: http://jsfiddle.net/UTwGS/

HTML:

<label><input type="radio" value="1" name="my-radio">Radio One</label>
<label><input type="radio" value="2" name="my-radio">Radio One</label>

jQuery:

$('input[type="radio"]').on('click change', function(e) {
    console.log(e.type);
});

रेडियो बटन विकल्प का चयन करते समय दोनों clickऔर changeघटनाओं को निकाल दिया जाता है (कम से कम कुछ ब्राउज़रों में)।

मुझे यह भी बताना चाहिए कि मेरे उदाहरण में clickईवेंट तब भी निकाल दिया जाता है जब आप किसी विकल्प का चयन करने के लिए टैब और कीबोर्ड का उपयोग करते हैं।

तो, मेरा कहना यह है कि भले ही changeघटना को निकाल दिया जाए, कुछ ब्राउज़र हैं, इस clickघटना में आपको आवश्यक कवरेज की आपूर्ति करनी चाहिए।

— फिलिप वाल्टन
स्रोत

6

हां, क्योंकि console.logमेरे कोड में एक स्टेटमेंट है, जिसका IE7 समर्थन नहीं करता है। यदि आप चाहते हैं तो आप IE में इसे सचेत कर सकते हैं।

— फिलिप वाल्टन

धन्यवाद। यह पता नहीं करता है कि पहले चयनित चेकबॉक्स को कैसे प्राप्त करें। इसके अलावा धन्यवाद, मुझे नहीं पता था कि कंसोल .log IE में काम नहीं करता था।

— मैथ्यू

ईवेंट हैंडलर पर डबल-अप न करें - दोनों clickऔर changeईवेंट हैंडलर में आग लगाने वाले ब्राउज़र में , आप हैंडलर को दो बार कॉल करेंगे। इस मामले में, चूंकि @ मट्टू पिछले मूल्य से चिंतित है, जिससे बुरे परिणाम हो सकते हैं।

— नैट कुक

3

@NateCook आप स्पष्ट रूप से मेरे उदाहरण के बिंदु से चूक गए। मैं दिखा रहा था कि किसी भी समय परिवर्तन ईवेंट को निकाल दिया जाता है, क्लिक ईवेंट भी निकाल दिया जाता है। सिर्फ इसलिए कि मैं अपने उदाहरण में दोनों घटनाओं का उपयोग कर रहा था इसका मतलब यह नहीं है कि मैं इसे बढ़ावा दे रहा था। मुझे लगता है कि आपका डाउन वोट अवांछनीय था।

— फिलिप वाल्टन

लेकिन आप इसे बढ़ावा दे रहे थे - आपके मूल उत्तर ने कहा "तो, मेरा कहना है कि भले ही परिवर्तन की घटना को निकाल दिया गया हो, कुछ ब्राउज़र हैं, क्लिक इवेंट को आपके द्वारा कमबैक के रूप में आवश्यक कवरेज की आपूर्ति करनी चाहिए, और आप ब्राउज़रों में परिवर्तन का उपयोग कर सकते हैं वह इसका समर्थन करता है। " clickयहाँ सही हैंडलर है और केवल वही जिसकी आपको आवश्यकता है। आपका संशोधन स्पष्ट करता है, इसलिए मैं अपना डाउन-वोट निकाल रहा हूं।

— नैट कुक

10

Jquery के परिवर्तन की घटना का उपयोग करने के बारे में क्या?

$(function() {
    $('input:radio[name="myRadios"]').change(function() {
        if ($(this).val() == '1') {
            alert("You selected the first option and deselected the second one");
        } else {
            alert("You selected the second option and deselected the first one");
        }
    });
});

jsfiddle: http://jsfiddle.net/f8233x20/

— रज़ान पॉल
स्रोत

$(this).val()देशी जावास्क्रिप्ट के साथ भी बदला जा सकता है e.currentTarget.value, जहां ई कॉलबैक फ़ंक्शन के माध्यम से पारित होने वाली ईवेंट ऑब्जेक्ट है।

— एरिक

6

जैसा कि आप यहां देख सकते हैं: http://www.w3schools.com/jsref/event_onchange.asp रेडियो बटन के लिए ऑन्चेंज विशेषता समर्थित नहीं है।

आपके द्वारा जुड़ा पहला एसओ प्रश्न आपको उत्तर देता है: onclickइसके बजाय घटना का उपयोग करें और फ़ंक्शन के अंदर रेडियो बटन स्थिति की जांच करें जो इसे ट्रिगर करता है।

— कॉन्स्टेंटिन ग्रो
स्रोत

यह बस थोड़ी अधूरी है। इसलिए, समूह में सभी क्लिकों को संभालने के लिए एक फ़ंक्शन बनाने के बाद, आप यह देखने के लिए कैसे जांच करेंगे कि किसका चयन रद्द कर दिया गया है? इसके अलावा, मैं एक गैर- jquery समाधान की तलाश में हूं।

— मैथ्यू

क्लिक किए गए रेडियो बटन की जाँच की जाएगी, एक ही समूह के अन्य सभी अनियंत्रित होंगे। या, आपका समूह के सभी रेडियो बटन के माध्यम से लूप कर सकता है और उनकी स्थिति की जांच कर सकता है। यदि आपने रेडियो बटन के साथ क्या करना चाहते हैं, इसके बारे में अधिक जानकारी प्रदान की, तो आपको यह बताना आसान होगा कि कैसे जाना है।

— कांस्टेंटिन ग्रो

2

onclickवही सिमेंटिक नहीं है, जैसा कि आप कीबोर्ड इनपुट दिए गए कीबोर्ड फॉर्म सेलेक्शन के जरिए रेडियो बटन के चेकनेस को बदल सकते हैं।

— 18

@gsnedders onclick अधिकांश ब्राउज़रों में कीबोर्ड इनपुट के माध्यम से काम करता है, हालांकि - फ़ायरफ़ॉक्स, IE, सफारी, क्रोम। यह अजीब है कि यह वही करता है जो ऑनकॉन्ग करने वाला है, लेकिन यह करता है। मैं उत्सुक हूँ कि यह मोबाइल प्लेटफ़ॉर्म पर कैसे काम करता है।

— मैथ्यू

1

1 के लिए w3schools और 2 के लिए पूरी समस्या को संबोधित नहीं किया था कि पहले से चयनित रेडियो कैसे प्राप्त किया जाए। 2 मेरे दिमाग में सवाल का सबसे महत्वपूर्ण हिस्सा था।

— मत्ती २

6

मुझे नहीं लगता कि कोई अन्य तरीका है तो पिछली स्थिति को संग्रहीत करना। यहाँ jQuery के साथ समाधान है

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">
    var lastSelected;
    $(function () {
        //if you have any radio selected by default
        lastSelected = $('[name="myRadios"]:checked').val();
    });
    $(document).on('click', '[name="myRadios"]', function () {
        if (lastSelected != $(this).val() && typeof lastSelected != "undefined") {
            alert("radio box with value " + $('[name="myRadios"][value="' + lastSelected + '"]').val() + " was deselected");
        }
        lastSelected = $(this).val();
    });
</script>

<input type="radio" name="myRadios" value="1" />
<input type="radio" name="myRadios" value="2" />
<input type="radio" name="myRadios" value="3" />
<input type="radio" name="myRadios" value="4" />
<input type="radio" name="myRadios" value="5" />

इसके बारे में थोड़ा और सोचने के बाद, मैंने चर से छुटकारा पाने और कक्षा को जोड़ने / हटाने का फैसला किया। यहाँ मुझे क्या मिला है: http://jsfiddle.net/BeQh3/2/

— एलेक्स ओक्रुस्को
स्रोत

1

मैंने jQuery का उपयोग करने के बारे में सोचा था और निश्चित रूप से बहुत कुछ है जो इसके साथ किया जा सकता है। आप चेक और अनचेक के लिए कुछ कस्टम ईवेंट को बांध सकते हैं और यहां तक कि क्रॉस ब्राउज़र quirks के लिए भी चेक कर सकते हैं। एक प्लगइन के लिए एक अच्छा विचार की तरह लगता है।

— मैथ्यू

धन्यवाद। मुझे jQuery पसंद है लेकिन इस मामले में यह मेरे लिए उपलब्ध नहीं है।

— मैथ्यू

JQuery आपके लिए कैसे उपलब्ध नहीं है?

— jmort253

1

यदि jQuery मेरे लिए अनुपलब्ध था, तो मुझे एक अलग काम मिलेगा।

— एड्रियन कैर

5

हाँ वर्तमान में चयनित रेडियो बटन के लिए कोई बदलाव नहीं है। लेकिन समस्या तब होती है जब प्रत्येक रेडियो बटन को एक अलग तत्व के रूप में लिया जाता है। इसके बजाय एक रेडियो समूह को एक एकल तत्व की तरह माना जाना चाहिए select। तो उस समूह के लिए परिवर्तन घटना शुरू हो जाती है। यदि यह एक ऐसा selectतत्व है जिसमें हम कभी भी प्रत्येक विकल्प के बारे में चिंता नहीं करते हैं, लेकिन केवल चयनित विकल्प को लेते हैं हम एक चर में वर्तमान मूल्य को संग्रहीत करते हैं जो पिछले मूल्य बन जाएगा, जब एक नया विकल्प चुना जाता है। इसी तरह आपको चेक किए गए रेडियो बटन के भंडारण मूल्य के लिए एक अलग चर का उपयोग करना होगा।

यदि आप पिछले रेडियो बटन की पहचान करना चाहते हैं, तो आपको mousedownईवेंट पर लूप करना होगा ।

var radios = document.getElementsByName("myRadios");
var val;
for(var i = 0; i < radios.length; i++){
    if(radios[i].checked){
        val = radios[i].value;
    }
}

इसे देखें: http://jsfiddle.net/diode/tywx6/2/

— डायोड
स्रोत

मैंने क्लिक करने से पहले जांच करने के लिए मूसडाउन का उपयोग करने के बारे में सोचा था लेकिन रेडियो का चयन करने के लिए जगह का उपयोग करते समय यह काम नहीं करेगा। हो सकता है कि आपने जो उल्लेख किया है उसके अलावा या उसके स्थान पर फोकस इवेंट।

— मैथ्यू

5

किसी चर में पिछले चेक किए गए रेडियो को स्टोर करें:
http://jsfiddle.net/dsbonev/C5S4B/

एचटीएमएल

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2
<input type="radio" name="myRadios" value="3" /> 3
<input type="radio" name="myRadios" value="4" /> 4
<input type="radio" name="myRadios" value="5" /> 5

जे एस

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        //using radio elements previousCheckedRadio and currentCheckedRadio

        //storing radio element for using in future 'change' event handler
        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

जेएस एक्सपेल कोड

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    function logInfo(info) {
        if (!console || !console.log) return;

        console.log(info);
    }

    function logPrevious(element) {
        if (!element) return;

        var message = element.value + ' was unchecked';

        logInfo(message);
    }

    function logCurrent(element) {
        if (!element) return;

        var message = element.value + ' is checked';

        logInfo(message);
    }

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        logPrevious(previousCheckedRadio);
        logCurrent(currentCheckedRadio);

        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

— दिमितर बोनव
स्रोत

धन्यवाद। मैं फिडेल को थोड़ा और आगे ले जा सकता हूं और खुद ही रेडियो स्टोर कर सकता हूं। इस तरह से जब मूल्य बदलता है, तो आपके पास पहले से चयनित रेडियो का संदर्भ होता है, बजाय इसके मूल्य के।

— मत्ती

@ मैथ्यू वास्तव में मैंने जो फिडेल साझा किया था वह रेडियो तत्व को संग्रहीत कर रहा था और केवल मूल्य को नहीं। मान कोड के उद्देश्य को दिखाने के लिए लॉग किया गया था, लेकिन बाद के उपयोग के लिए इसे संग्रहीत नहीं किया गया था। मैं चर नामों को अधिक स्पष्ट होने के लिए संपादित कर रहा हूं: पिछले -चेक किए गए -> पिछलेचेकआरडीआईओ, कि -> वर्तमानचेकआरडीआईओ;

— दिमित्र बोनव

धन्यवाद। परिवर्तन इवेंट का उपयोग करने के अलावा यह एक अच्छा समाधान है जो ठीक से क्रॉस-ब्राउज़र का व्यवहार नहीं करता है। यदि आप इसके बजाय क्लिक का उपयोग करते हैं तो बेहतर होगा।

— मैथ्यू

5

मुझे लगता है कि यह एक पुराना मुद्दा है, लेकिन कोड का यह टुकड़ा मेरे लिए काम करता है। शायद भविष्य में कोई इसे उपयोगी पाएगा:

<h2>Testing radio functionality</h2>
<script type="text/javascript">var radioArray=[null];</script>
<input name="juju" value="button1" type="radio" onclick="radioChange('juju','button1',radioArray);" />Button 1
<input name="juju" value="button2" type="radio" onclick="radioChange('juju','button2',radioArray);" />Button 2
<input name="juju" value="button3" type="radio" onclick="radioChange('juju','button3',radioArray);" />Button 3
<br />

<script type="text/javascript">
function radioChange(radioSet,radioButton,radioArray)
  {
  //if(radioArray instanceof Array) {alert('Array Passed');}
  var oldButton=radioArray[0];
  if(radioArray[0] == null)
    {
    alert('Old button was not defined');
    radioArray[0]=radioButton;
    }
  else
    {
    alert('Old button was set to ' + oldButton);
    radioArray[0]=radioButton;
    }
  alert('New button is set to ' + radioArray[0]);
  }
</script>

— जॉन के
स्रोत

1

यदि आप जोड़ते हैं onkeydown="radioChange('juju','button1',radioArray);"तो आप तब भी कैप्चर कर सकते हैं जब कोई उपयोगकर्ता रेडियो की जांच करने के लिए स्थान का उपयोग करता है।

— मैथ्यू

2

यह मेरे सिर के ठीक ऊपर है, लेकिन आप प्रत्येक रेडियो बटन के लिए एक ऑनक्लिक घटना कर सकते हैं, उन्हें सभी अलग-अलग आईडी दे सकते हैं, और फिर समूह में प्रत्येक रेडियो बटन के माध्यम से जाने के लिए और पा सकते हैं 'जाँच' विशेषता को देखकर जाँच की गई थी। चेक किए गए एक व्यक्ति की आईडी को एक चर के रूप में संग्रहीत किया जाएगा, लेकिन आप यह सुनिश्चित करने के लिए कि पहले उस चर का मूल्य बदल गया था, क्योंकि एक नया रेडियो बटन की जाँच की गई थी या नहीं, यह सुनिश्चित करने के लिए कि आप एक अस्थायी चर का उपयोग करना चाहते हैं।

— एंड्रयू लैथम
स्रोत

2

<input type="radio" name="brd" onclick="javascript:brd();" value="IN">   
<input type="radio" name="brd" onclick="javascript:brd();" value="EX">` 
<script type="text/javascript">
  function brd() {alert($('[name="brd"]:checked').val());}
</script>

— उमेश उन्नीकृष्णन
स्रोत

2

यदि आप इनलाइन स्क्रिप्ट से बचना चाहते हैं, तो आप बस रेडियो पर एक क्लिक इवेंट सुन सकते हैं। इस पर एक क्लिक घटना सुनकर सादे जावास्क्रिप्ट के साथ प्राप्त किया जा सकता है

for (var radioCounter = 0 ; radioCounter < document.getElementsByName('myRadios').length; radioCounter++) {
      document.getElementsByName('myRadios')[radioCounter].onclick = function() {
        //VALUE OF THE CLICKED RADIO ELEMENT
        console.log('this : ',this.value);
      }
}

— Mareks
स्रोत

2

आप निम्नलिखित JS स्क्रिप्ट जोड़ सकते हैं

<script>
    function myfunction(event) {
        alert('Checked radio with ID = ' + event.target.id);
    }
    document.querySelectorAll("input[name='gun']").forEach((input) => {
        input.addEventListener('change', myfunction);
    });
</script>

— भनभनाना
स्रोत

1

यह मेरे लिए काम करता है

<input ID="TIPO_INST-0" Name="TIPO_INST" Type="Radio" value="UNAM" onchange="convenio_unam();">UNAM

<script type="text/javascript">
            function convenio_unam(){
                if(this.document.getElementById('TIPO_INST-0').checked){
                    $("#convenio_unam").hide();
                }else{
                    $("#convenio_unam").show(); 
                }                               
            }
</script>

— Doberon
स्रोत

मुझे लगता है कि अब यह जवाब होना चाहिए कि यह समर्थित है।

— सिंह

0

यह सबसे आसान और सबसे कुशल फ़ंक्शन है, आप जितने बटन चेक करना चाहते हैं उतने = झूठे जोड़कर उपयोग कर सकते हैं और प्रत्येक रेडियो बटन के ऑनक्लिक इवेंट को इस फ़ंक्शन को बना सकते हैं। प्रत्येक रेडियो बटन के लिए एक अद्वितीय संख्या निर्दिष्ट करें

function AdjustRadios(which) 
{
    if(which==1)
         document.getElementById("rdpPrivate").checked=false;
    else if(which==2)
         document.getElementById("rdbPublic").checked=false;
}

— जामा
स्रोत

0

सबसे आसान और पूर्ण शक्ति

getAttribute का उपयोग करके केवल रेडियो इनपुट पढ़ें

document.addEventListener('input',(e)=>{

if(e.target.getAttribute('name')=="myRadios")
console.log(e.target.value)
})

<input type="text"  value="iam text" /> 
<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2

स्निपेट का विस्तार करें

— ßãlãjî
स्रोत