I want to get the selected value from a group of radio buttons.
Here\'s my HTML:
var rates = document.getElementById('rates').value;
cannot get values of a radio button like that instead use
rate_value = document.getElementById('r1').value;
The one worked for me is given below from api.jquery.com.
HTML
<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>
JavaScript
var selectedOption = $("input:radio[name=option]:checked").val()
The variable selectedOption will contain the value of the selected radio button (i.e) o1 or o2
HTML CODE:
<input type="radio" name="rdoName" value="YES"/>
<input type="radio" name="rdoName" value="NO"/>
JQUERY CODE:
var value= $("input:radio[name=rdoName]:checked").val();
$("#btnSubmit").click(function(){
var value=$("input:radio[name=rdoName]:checked").val();
console.log(value);
alert(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rdoName" value="YES"/> YES
<input type="radio" name="rdoName" value="NO"/> NO
<br/>
<input type="button"id="btnSubmit"value="Which one Selected"/>
You will get
value="YES" //if checked Radio Button with the value "YES"
value="NO" //if checked Radio Button with the value "NO"
var rates=document.getElementsByName("rate");
for (i = 0; i < rates.length; i++) {
if (rates[i].checked) {
console.log(rates[i].value);
rate=rates[i].value;
document.getElementById("rate").innerHTML = rate;
alert(rate);
}
}
<div id="rates">
<input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
<input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</div>
</br>
<div id='rate'>
</div>
Use document.querySelector('input[type = radio]:checked').value; to get value of selected checkbox , you can use other attributes to get value like name = gender etc. please go through below snippet definitely it will helpful to you,
Solution
document.mainForm.onclick = function(){
var gender = document.querySelector('input[name = gender]:checked').value;
result.innerHTML = 'You Gender: '+gender;
}
<form id="mainForm" name="mainForm">
<input type="radio" name="gender" value="Male" checked/>Male
<input type="radio" name="gender" value="Female" />Female
<input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>
Thank-You
You can also loop through the buttons with a forEach-loop on the elements
var elements = document.getElementsByName('radioButton');
var checkedButton;
console.log(elements);
elements.forEach(e => {
if (e.checked) {
//if radio button is checked, set sort style
checkedButton = e.value;
}
});