How do i retrieve the value if input got checked

Question

I want to retrieve the value if input got checked.

<input type="radio" name="radioGroup" value="check" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<button>Submit</button>

in script i try,

var a = document.getElementsByTagName("input").name;
var btn = document.getElementsByTagName("button");
btn.onclick = function () {
    if (a.checked == true) {
        console.log(a.value);
    }
};

Do i need to put an "id" in each input? I want pure javascript because i already know the jQuery code.

Well, jQuery’s selector function is different than Javascript’s because `document.getElementsByTagName` gives you a `NodeList`, not an element. None of `var a = …` and `var btn = …` are needed at that point, nor are they correct. For the button a selector like `document.querySelector('button')` is more suitable, if that one’s the only button on the page. Then read the duplicate target to figure out the rest. — Sebastian Simon, Oct 07 '15 at 09:25

Pranav C Balan · Accepted Answer · 2015-10-07T09:36:56.330

You can use querySelector() to get checked element. Also getElementsByTagName() returns HTMLCollection so you need to pick first one using index otherwise you need to give an id then use getElementById().

var btn = document.getElementsByTagName("button")[0];
// getting first button from HTMLCollection
btn.onclick = function() {
// binding click event handler
  var a = document.querySelector('[name="radioGroup"]:checked');
  // getting checked checkbox
  if (a) {
  // checking a is defined or not , if not it means no checked buttons are there
    console.log(a.value);
    // logging it's value in console
  }
};

<input type="radio" name="radioGroup" value="check" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<button>Submit</button>

Vibhesh Kaul · Answer 2 · 2015-10-07T09:28:04.697

The getElementsByTagName() method returns a collection of all elements in the document with the specified tag name, as a NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

var a = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button");
btn[0].onclick = function () {
   for(var i=0;i<a.length;i++){
       if (a[i].checked == true) {
          console.log(a[i].value);
       }
   }
};

score 0 · Answer 3 · answered Oct 07 '15 at 09:34

On Button Click You can use querySelector to get Your result. Following code will help.

function GetSelected()
{
   alert(document.querySelector('input[name="radioGroup"]:checked').value);
}


<input type="radio" name="radioGroup" value="check" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<button onclick="GetSelected()">Submit</button>

How do i retrieve the value if input got checked

3 Answers3