Just a simple example that get selected value of a group of radio button. In order to read the selected value, we need to loop through radio button in the list, compare then find out which radio item is selected.
Example below is just one of various ways that get value of selected radio button. We will use getElementsByTagName() method to access all input elements, compare with name of the group of radio button and determine whether a particular item is checked via a loop.
Get Radio Button Selected Value
1. Display list of radio button in HTML
<div class="center"> <div style="line-height:20px; padding-bottom:10px;"> Visa: <input type="radio" name="payment_option" value="Visa" /><br /> Master: <input type="radio" name="payment_option" value="Master" /><br /> American Express: <input type="radio" name="payment_option" value="AmericanExpress" /><br /> Paypal: <input type="radio" name="payment_option" value="Paypal" /><br /> Bank Account: <input type="radio" name="payment_option" value="Bank" /><br /> </div> <input class="button" type="button" id="btn_deposit" value="Check" onclick="setClick();" /> </div> |
2. JavaScript Get Radio Button Value
<script language="javascript"> function setClick() { var payment_options = document.getElementsByTagName('input'); var payment_option = ''; for (var i = 0; i < payment_options.length; i++) { if (payment_options[i].name == 'payment_option' && payment_options[i].checked) { payment_option = payment_options[i].value; break; } } if(payment_option != "") alert("payment_option: " + payment_option); else alert("Please select a payment method!"); } </script> |
+ [download id=”7″ format=”1″]
+ Check out demonstration page
