How to Get Selected Radio Button Value in jQuery

August 14, 2021 XpertPhp

In this article, we will explain to you how to get selected radio button value in jQuery. you can easily get the selected radio button value after the button click event.

In this example, we get selected radio button values using jQuery. the jQuery:checked selector in combination with the val() method to retrieve the value of the selected radio button.

So you can see below our example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Get Selected Radio Button Value in jQuery - XpertPhp</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[type='button']").click(function(){
          var radioValueColor = $("input[name='rdoColor']:checked").val();
          if(radioValueColor){
             alert("Your color is a - " + radioValueColor);
          }
        });
    });
</script>
</head> 
<body>
    <h4>Please Choose your Color.</h4>
    <p> 
        <label><input type="radio" name="rdoColor" value="red">Red</label> 
        <label><input type="radio" name="rdoColor" value="black">Black</label>
        <label><input type="radio" name="rdoColor" value="green">Green</label>
    </p>
    <p><input type="button" value="Get Color"></p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>How to Get Selected Radio Button Value in jQuery - XpertPhp</title>

$(document).ready(function(){

$("input[type='button']").click(function(){

var radioValueColor = $("input[name='rdoColor']:checked").val();

if(radioValueColor){

alert("Your color is a - " + radioValueColor);

}

});

</script>

</head>

<body>

<h4>Please Choose your Color.</h4>

<p>

<label><input type="radio" name="rdoColor" value="black">Black</label>

<label><input type="radio" name="rdoColor" value="green">Green</label>

</p>

</body>

</html>

Please follow and like us:

Related posts: