How To Get Radio Button Checked Value In jQuery


In this article, we will see how to get the radio button checked value in jquery. Here, we will learn to get the radio button value using javascript. You can use :checked selector and get the value of radio button.

So, let's see the jquery radio button checked value, how to get the radio button value using jquery, and get the selected radio button value javascript.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To Get Radio Button Checked Value In jQuery - Techsolutionstuff </title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[type='button']").click(function(){
        	var radioValue = $("input[name='gender']:checked").val();
            if(radioValue){                
              	$(".checkedvalue").text("Selected value: " + radioValue);
            }
        });
    });
</script>
<style>
  body{
    margin:100px;
  }
</style>
</head> 
<body>
  	<h2>How To Get Radio Button Checked Value In jQuery - Techsolutionstuff</h2>
    <h4>Please select your gender.</h4>
    <p> 
        <label><input type="radio" name="gender" value="male">Male</label> 
        <label><input type="radio" name="gender" value="female">Female</label>
    </p>
    <p><input type="button" value="Get Value"></p>
  	<p class="checkedvalue"></p>  
</body>
</html>

Output:

how_to_get_radio_button_checked_value_using_jquery

 

Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery radio button checked value - Techsolutionstuff</title>
  <style>
  input, label {
    line-height: 1.5em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <div>
    <input type="radio" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>
 
<script>
$( "input" ).on( "click", function() {
  $( "#log" ).html( $( "input:checked" ).val() + " is checked!" );
});
</script>
 
</body>
</html>

 


You might also like :

RECOMMENDED POSTS

FEATURE POSTS