How to get selected Radio button value using jQuery Example

by

jQuery get selected radio button value example; In this tutorial we will show you how to get selected or checked the radio button value using jQuery.

We will use jQuery api method :checked selector for get or selected radio values. Here are the three examples for retrieving the selected values of radio buttons using id, name or class.

Example 1: Get Value using Name

We can get selected value of a radio button using name just like below example. If the radio button is checked and click the button its show your checked radio button.

<!DOCTYPE html>
<html>
<head>
    <title>Get value of selected radio button with Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="radio" name="gender" class="gender" value="male"> Male
<input type="radio" name="gender" class="gender" value="female"> Female
<input type="radio" name="gender" class="gender" value="other"> Other
<button onclick="getGenderValue()">Click </button>

<script type="text/javascript">
    function getGenderValue() {
        let genderVal = $("input[type='radio']:checked").val();
        console.log(genderVal);
    }

</script>

</body>
</html>

Example 2: Get Value using Class

Same as name we can get the selected radio button value using class name:

<!DOCTYPE html>
<html>
<head>
    <title>Get value of selected radio button with Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="radio" name="gender" class="gender" value="male"> Male
<input type="radio" name="gender" class="gender" value="female"> Female
<input type="radio" name="gender" class="gender" value="other"> Other
<button onclick="getGenderValue()">Click </button>

<script type="text/javascript">
    function getGenderValue() {
        let genderVal = $(".gender:checked").val();
        console.log(genderVal);
    }
</script>

</body>
</html>

Example 3: Get Value using Change Method

If you want to get the radio button value just clicking on then you can use the change method here.

<!DOCTYPE html>
<html>
<head>
    <title>Get value of selected radio button with Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<input type="radio" name="gender" class="gender" value="male"> Male
<input type="radio" name="gender" class="gender" value="female"> Female
<input type="radio" name="gender" class="gender" value="other"> Other

<script type="text/javascript">
    $(".gender").change(function(){
        let gender = $("input[type='radio']:checked").val();
        console.log(gender);
    });
</script>

</body>
</html>

So, In this tutorial, we have learned how to know which value of a radio button is selected and how to get the selected radio button value using jQuery.

Leave a Comment