चयनित रेडियो बटन का मूल्य कैसे प्राप्त करें?

Question

मुझे अपने जेएस कार्यक्रम के साथ कुछ अजीब समस्या हो रही है। मेरे पास यह ठीक से काम कर रहा था लेकिन किसी कारण से यह अब काम नहीं कर रहा है। मैं केवल रेडियो बटन (जो एक का चयन किया गया है) का मान खोजना चाहता हूं और इसे एक चर पर लौटाता हूं। किसी कारण से यह वापस लौटता रहता है undefined।

यहाँ मेरा कोड है:

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;

    alert(sizes);
        for (i=0; i < sizes.length; i++) {
            if (sizes[i].checked==true) {
            alert(sizes[i].value + ' you got a value');     
            return sizes[i].value;
        }
    }
}

submitForm:

function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
}

HTML:

<form action="#n" name="theForm">

    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</A>
</form>

Comments

— Js

Answer 1

आप ऐसा कुछ कर सकते हैं:

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++) {
  if (radios[i].checked) {
    // do whatever you want with the checked radio
    alert(radios[i].value);

    // only one radio can be logically checked, don't check the rest
    break;
  }
}

<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

संपादित करें: आपके संपादित सुझावों के लिए धन्यवाद HATCHA और jpsetung।

Comments

यह jquery 1.7 के लिए काम कर रहा था, लेकिन अब jQuery 1.9 के लिए सही सिंटैक्स $ है ('इनपुट [नाम = "जेंडर" "]: चेक किया गया) () (val); (@ हटाएं)

— जिप्सेटुंग

मेरा मानना ​​है कि @वाक्यविन्यास पहले भी उससे अलग हो गया था (jquery 1.2)

— टॉम पीटरसन

@TomPietrosanti प्रलेखन थोड़ा बंद प्रतीत होता है, jsfiddle.net/Xxxd3/608 <1.7.2 में काम करता है , लेकिन 1.8.3 में नहीं। भले ही, @निश्चित रूप से हटा दिया जाना चाहिए

— jbabey

हाँ, ऐसा लगता है कि उन्होंने वहाँ कुछ पीछे की संगतता छोड़ दी, लेकिन डॉक्स को मिलान के लिए अद्यतन नहीं किया। मुझे कुछ हूपला याद है, जब उन्होंने कुछ पदावनत विशेषताओं को गिरा दिया, जो अभी भी व्यापक रूप से उपयोग में थे, इसलिए उन्होंने वापस समर्थन जोड़ा। शायद इसीलिए ...

— टॉम पीटरसन ने

document.querySelector()संभवतः अब सीधे जावास्क्रिप्ट में अनुशंसित दृष्टिकोण होना चाहिए।

— डेव

Answer 2

यह किसी भी एक्सप्लोरर के साथ काम करता है।

document.querySelector('input[name="genderS"]:checked').value;

यह किसी भी इनपुट प्रकार के मूल्य को प्राप्त करने का एक सरल तरीका है। आपको jQuery पथ को शामिल करने की भी आवश्यकता नहीं है।

Comments

— Document.querySelector

यदि आप इसे एक वैरबेल में संग्रहीत करते हैं और कोई रेडियोबॉटन नहीं चुना जाता है तो आप ब्राउज़र को रोक देते हैं। कंसोल का कहना है: TypeError document.querySelector(...)है null।

— मुझे कॉल

यह केवल तभी काम करता है जब किसी का चयन किया जाता है। इसलिए आपको पहले इसकी जांच करनी चाहिए। var selector = document.querySelector('input[name="genderS"]:checked'); if(selector) console.log(selector.value);

— मार्कस ज़ेलर

मैं मीटियर में टेम्प्लेट्स के साथ काम कर रहा हूं, और उस :checkedट्रिक ने इसे पूरी तरह से मेरे लिए accountType = template.find("[name='optradio']:checked").value;

— नस्ट कर

मेरे पास एक उद्यम वातावरण है जहां यह IE11 पर लगातार काम नहीं करता है - किसी प्रकार का बैकवर्ड कॉम्पिटिबिलिटी मोड।

— स्टीव ब्लैक

Answer 3

document.forms.your-form-name.elements.radio-button-name.value

Comments

यह भी काम करता है:document.forms.your-form-name.name-shared-by-radio-buttons.value

— Web_Designer

मुझे लगता है कि ज्यादातर लोग इसे देख रहे हैं। स्वीकृत उत्तर काम करता है। जियोगोस त्सकोनास का जवाब बेहतर है। लेकिन यह एक मौलिक रूप से सही उत्तर है। यह एक है कि रेडियो बटन वास्तव में कैसे काम करते हैं। ध्यान दें कि यदि कुछ भी नहीं चुना गया है, तो यह एक खाली स्ट्रिंग लौटाता है।

— मार्क गोल्डफैन

@Web_Designer क्या आपकी टिप्पणी भी एक वास्तविक उत्तर नहीं होनी चाहिए?

— आइडोग्राम

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

— टॉम हबलबोरर

इस तरह से काम नहीं करता है अगर आपके रेडियो लेबल के अंदर हैं

— इगोर Fomenko

Answer 4

JQuery 1.8 के बाद से, क्वेरी के लिए सही सिंटैक्स है

$('input[name="genderS"]:checked').val();

नहीं $('input[@name="genderS"]:checked').val();अब और, (साथ jQuery 1.7 में काम कर रहा था जो @ )।

Answer 5

ECMAScript 6 संस्करण

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;

Answer 6

सबसे सरल उपाय:

 document.querySelector('input[name=genderS]:checked').value

Comments

दो कारणों से मतदान हुआ: 1. यह काम करता है। 2. यह एक लंगड़ा-आउट jquery का जवाब नहीं था।

— जॉन

यह @Giorgos Tsakonas के उत्तर की एक सटीक प्रति है, जो एक साल पहले दी गई थी।

— टी न्गुयेन

Answer 7

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

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;
    alert(sizes);
    for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}


function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
    return false;
}

एक बेला यहाँ ।

Answer 8

संपादित करें: जैसा कि Chips_100 ने कहा है कि आपको इसका उपयोग करना चाहिए:

var sizes = document.theForm[field];

सीधे परीक्षण चर का उपयोग किए बिना।

---

पुराना उत्तर:

क्या आपको evalयह पसंद नहीं आना चाहिए ?

var sizes = eval(test);

मुझे नहीं पता कि यह कैसे काम करता है, लेकिन मेरे लिए आप केवल एक स्ट्रिंग की नकल कर रहे हैं।

Comments

eval यहां सबसे अच्छा विकल्प नहीं है ... आप var sizes = document.theForm[field];पहले असाइनमेंट को कहना और हटाना चाहते हैं , इसलिए testअब वेरिएबल का उपयोग नहीं कर सकते हैं।

— डेनिस

मेरे ज्ञान के लिए, जैसा होगा वैसा ही काम होगा? या यह केवल साथ काम करेगा eval('var sizes=document.theForm.' + field)?

— माइकल लॉफार्ग

आपके उत्तर में स्पष्ट विवरण var sizes = eval(test);इस तरह से काम करेगा (मैं सिर्फ फायरबग में इसे टेस्ट करता हूं)।

— डेनिस

यह अधिक समझ में आता है, लेकिन मुझे उस पंक्ति पर "अप्रत्याशित टोकन [" त्रुटि मिल रही है, जहां मैं fieldकोष्ठक में रखता हूं । किसी भी अनुमान क्यों?

— मार्कॉन्ग

Answer 9

यह शुद्ध जावास्क्रिप्ट है, जो @Fontas के उत्तर पर आधारित है, लेकिन TypeErrorयदि कोई चयनित रेडियो बटन नहीं है, तो एक खाली स्ट्रिंग वापस करने के लिए सुरक्षा कोड के साथ (और बचें ):

var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";

कोड इस तरह टूट जाता है:

• पंक्ति 1: नियंत्रण का एक संदर्भ मिलता है कि (ए) एक <input>प्रकार है, (बी) की एक nameविशेषता हैgenderS , और (सी) की जाँच की जाती है।
• पंक्ति 2: यदि ऐसा कोई नियंत्रण है, तो उसका मान लौटाएं। अगर वहाँ नहीं है, तो एक खाली स्ट्रिंग लौटें। यदि genderSRadioचर 1 नियंत्रण और अशक्त / गलत पाया जाता है तो चर सत्य नहीं है।

JQuery के लिए, @ jababey के उत्तर का उपयोग करें, और ध्यान दें कि यदि कोई चयनित रेडियो बटन नहीं है तो वह वापस आ जाएगा undefined।

Answer 10

यदि कोई व्यक्ति उत्तर की तलाश में था और क्रोम 34 और फ़ायरफ़ॉक्स 33 से मेरी तरह यहां उतरा, तो आप निम्नलिखित कार्य कर सकते हैं:

var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);

या सरल:

alert(document.theForm.genderS.value);

refrence: https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

Answer 11

यहाँ रेडिओस के लिए एक उदाहरण दिया गया है जहाँ कोई भी जाँच = "जाँच" विशेषता का उपयोग नहीं किया गया है

function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        alert(radios[i].value);
        found = 0;
        break;
    }
}
   if(found == 1)
   {
     alert("Please Select Radio");
   }    
}

DEMO : http://jsfiddle.net/ipsjolly/hgdWp/2/ [ किसी भी रेडियो को चुने बिना क्लिक करें ]

स्रोत: http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

Answer 12

सादे जावास्क्रिप्ट के साथ चेक किए गए रेडियो बटन के मूल्य को प्राप्त करने का एक अच्छा तरीका है:

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

स्रोत: https://ultimatecourses.com/blog/get-value-checked-radio-buttons

इस HTML का उपयोग करना:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

आप ऐरे का उपयोग कर सकते हैं checkedचेक की गई वस्तु को खोजने के लिए संपत्ति खोजें :

Array.from(form.elements.characters).find(radio => radio.checked);

Answer 13

एक शुद्ध जावास्क्रिप्ट का उपयोग करके, आप उस वस्तु के संदर्भ को संभाल सकते हैं जिसने घटना को भेजा था।

function (event) {
    console.log(event.target.value);
}

Answer 14

मान लीजिए कि आपको रेडियो बटन की विभिन्न पंक्तियों को एक रूप में रखने की आवश्यकता है, प्रत्येक में अलग-अलग विशेषता नाम ('विकल्प 1', 'विकल्प 2' आदि) लेकिन एक ही वर्ग नाम है। शायद आपको कई पंक्तियों में उनकी आवश्यकता है जहां वे प्रत्येक प्रश्न से संबंधित 1 से 5 के पैमाने के आधार पर एक मूल्य प्रस्तुत करेंगे। आप अपनी जावास्क्रिप्ट को इस तरह लिख सकते हैं:

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

मैं अंतिम आउटपुट को एक फॉर्म में छिपे हुए फॉर्म एलिमेंट में भी सम्मिलित करूंगा।

Answer 15

 document.querySelector('input[name=genderS]:checked').value

Answer 16

यदि आपके लिए अपने फॉर्म एलिमेंट () के लिए एक आईडी असाइन करना संभव है, तो इस तरीके को एक सुरक्षित वैकल्पिक तरीका माना जा सकता है (विशेषकर तब जब रेडियो ग्रुप एलिमेंट का नाम डॉक्यूमेंट में यूनिक नहीं है):

function findSelection(field) {
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
    alert(formInputElements);
        for (i=0; i < formInputElements.length; i++) {
        if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
            alert(formInputElements[i].value + ' you got a value');     
            return formInputElements[i].value;
        }
    }
}

HTML:

<form action="#n" name="theForm" id="yourFormId">

Answer 17

 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

आदि तो बस का उपयोग करें

  $("#rdbExamples:checked").val()

या

   $('input[name="rdbExampleInfo"]:checked').val();

Answer 18

    var value = $('input:radio[name="radiogroupname"]:checked').val();