Get text from radio buttons

Question

I have a div with three radio buttons. I want the user to be able to select any of the radio buttons and selected radio button value should appear in div with and id of test. For example if the radio with a value of 'Male' is selected, then 'Male' should appear.

Here is the code I have:

<html>
  <body>
    <div>
      <input type="radio" name="gender" value="male" checked> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <input type="radio" name="gender" value="other"> Other  
    </div>
    <div id="test" style="border: 1px solid black; width: 80px; height: 30px;"></div>
  </body>
</html>

score 1 · Answer 1 · answered Jun 15 '18 at 14:21

You can listen to the change event of the radio buttons, and on change, read the value of the checked radio button.

$('input[type=radio]').change(function() {
  $('#test').text($('input[type=radio]:checked').val());
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</div>
<div id="test" style="border:1px solid black; width: 80px; height: 30px;"></div>

Alex · Answer 2 · 2018-06-15T14:47:24.857

0

A bit late but here's my contribution:

Used jQuery change() event to detect the change of the radio button and used e.target.value to get the value of the current radio button.

$('#test').text($('input[checked]').val());
$('input[type=radio][name=gender]').change(function(e) {
 $('#test').text(e.target.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radio_buttons">
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</div>
<div id="test" style="border:1px solid black; width: 80px; height: 30px;"></div>

edited Jun 15 '18 at 14:47

answered Jun 15 '18 at 14:24

Alex

2,164
1
9
27

This is so awesome! Thanks mate :) – Sumit Bedi Jun 15 '18 at 14:42
The initial contents of the `test` div are `other` even if `male` was checked. – 31piy Jun 15 '18 at 14:43
It was a weird bug. – Alex Jun 15 '18 at 14:47

score 0 · Answer 3 · answered Jun 15 '18 at 14:39

In vanilla JavaScript:

First, you'll want to assign variables for each element.

var maleInputEl = document.querySelector("[value=male]");
var femaleInputEl = document.querySelector("[value=female]");
var otherInputEl = document.querySelector("[value=other]");
var testEl = document.getElementById("test");

Next, you'll add a value variable to store the currently selected value and add event listeners to each input to listen for a click.

var value;

maleInputEl.addEventListener('click', function() {
    value = maleInputEl.value;
    insertText(value);
});

femaleInputEl.addEventListener('click', function() {
    value = femaleInputEl.value;
    insertText(value);
});

otherInputEl.addEventListener('click', function() {
    value = otherInputEl.value;
    insertText(value);
});

Last, you'll want to insert that text using the insertText() function.

function insertText(val) {
    testEl.innerText = val;
}

There are many different, and probably more efficient, ways to achieve this effect, but this should get you started.

Get text from radio buttons

3 Answers3