How to Get the Selected Radio Button Value Using Js

How to get value of selected radio button?

var rates = document.getElementById('rates').value;

The rates element is a div, so it won't have a value. This is probably where the undefined is coming from.

The checked property will tell you whether the element is selected:

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

Or

$("input[type='radio'][name='rate']:checked").val();

How to get the selected radio button’s value?

You can do something like this:

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>

Getting the value of a checked radio button using javascript

function getValue() {  var value = document.querySelector('input[name="style"]:checked').value;  console.log(value);}

<form>     <input type="radio" name="style" value="3" checked>     <input type="radio" name="style" value="5">     <input type="radio" name="style" value="10">     <button type="button" onclick="getValue()">click</button></form>

Javascript Get Selected Radio Button Values

You can use radio.getAttribute('data-price') to get the price of the pizza and radio.value to get the size of the pizza. Also note that you can avoid using [].slice.call by using [].filter.call on your NodeList.

var name = 'Cheese'
function addBasket(button) {  var nodes = document.getElementsByName(button.name)  var radio = [].filter.call(nodes, function(e) {    return e.checked  })[0]
  var pizzaname = button.name  var pizzadesc = button.getAttribute('data-description')
  var pizzasize = radio.value  var pizzaprice = radio.getAttribute('data-price')
  console.log({    Name: pizzaname,    Description: pizzadesc,    Size: pizzasize,    Price: pizzaprice  })}

<td>  <table border="0" cellpadding="0">    <tbody>      <tr align="center">        <td>          <input name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small        </td>        <td>          <input name="Cheese" data-price="8.50" value="Medium" type="radio">Medium        </td>        <td>          <input name="Cheese" data-price="9.99" value="Large" type="radio">Large        </td>      </tr>      <tr align="center">        <td style="padding-top: 6px">£6.50</td>        <td style="padding-top: 6px">£8.50</td>        <td style="padding-top: 6px">£9.99</td>      </tr>    </tbody>  </table></td><td>  <input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)"></td>

how to get checked radio button value in javascript

The major problem visible from your code is a syntax error.

document.getElementById is a method and not an object, so you should call it with parens:

// --------------------v--------------v
document.getElementById("RadioButton1").value

How can I know which radio button is selected via jQuery?

To get the value of the selected radioName item of a form with id myForm:

$('input[name=radioName]:checked', '#myForm').val()

Here's an example:

$('#myForm input').on('change', function() {
  alert($('input[name=radioName]:checked', '#myForm').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <fieldset>
    <legend>Choose radioName</legend>
    <label><input type="radio" name="radioName" value="1" /> 1</label> <br />
    <label><input type="radio" name="radioName" value="2" /> 2</label> <br />
    <label><input type="radio" name="radioName" value="3" /> 3</label> <br />
  </fieldset>
</form>

How can i pass radio button values based on the selected one?

You can give some outer div to all your .row div . Then , whenever submit button is clicked first get checked radio button value using this we will get the index() number of the div where radio is checked. Lastly , use for-loop to get the value from other radio buttons and push them in array and pass same using ajax.

Demo code :

$("#save").on("click", function() {
  var checked_value = []; //declare this
  var value = $("input[name=MonthsAvailable]:checked").val() //get value of checked checkboxs
  var lengths = $("input[value=" + value + "]").closest(".row").index() //get index
  console.log($("input[value=" + value + "]").closest(".row").index())
  //loop
  for (var i = 0; i <= lengths; i++) {
    checked_value.push($(".outer .row:eq(" + i + ") input:radio").val()) //push value inside array

  }
  console.log(JSON.stringify(checked_value))
  //ajax call
  $.ajax({
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
    url: 'yoururl',
    data: JSON.stringify(checked_value),
    success: function(data) {
      console.log("done")
    }
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--only add this outer div-->
<div class="outer">
  <div class="row">
    <label class="form-check-inline p-l-md m-b-sm m-r-md">
      <input class="hidden-up pos-abs monthsAvailable" id="082020" name="MonthsAvailable" type="radio" value="202008" checked="checked">
      <div class="check-icon-radio"><i></i></div>
      202008
   </label>
  </div>
  <div class="row">
    <label class="form-check-inline p-l-md m-b-sm m-r-md">
      <input class="hidden-up pos-abs monthsAvailable" id="092020" name="MonthsAvailable" type="radio" value="092020">
      <div class="check-icon-radio"><i></i></div>
      092020
   </label>
  </div>
  <div class="row">
    <label class="form-check-inline p-l-md m-b-sm m-r-md">
      <input class="hidden-up pos-abs monthsAvailable" id="082020" name="MonthsAvailable" type="radio" value="2020018" checked="checked">
      <div class="check-icon-radio"><i></i></div>
      2020018
   </label>
  </div>
  <div class="row">
    <label class="form-check-inline p-l-md m-b-sm m-r-md">
      <input class="hidden-up pos-abs monthsAvailable" id="092020" name="MonthsAvailable" type="radio" value="0920202">
      <div class="check-icon-radio"><i></i></div>
      0920202
   </label>
  </div>
</div>
<button type="button" id="save">Save</button>

---

Related Topics