jQuery Get Radio Button Checked Value By id, name, class

To get or selected radio checked button value using jQuery. In this jquery tutorial, we will learn how to get selected or checked the radio button value.

We can use the selector and val() method by jQuery Api and get the value of selected or radio input or button value.

We will use jQuery api method :checked selector for get or selected radio values. So you need to know that about jQuery api :checked selector

:checked selector Method By jQuery

Using the jQuery Api :checked selector method to get or return the value of selected HTML element.

$(“:checked”) Method Syntax

$(":checked");

How to get radio button value in jquery by id

Answer: You can use like below to get radio button value in jquery by id.

var rVal = $("#id:checked ").val();

How to get radio button value in jquery by name

Answer: You can use like below to get radio button value in jquery by name.

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

How to get radio button value in jquery by Class

Answer: You can use like below to get radio button value in jquery by class.

 var rVal = $(".classname:checked ").val(); 

By Example jQuery $(“:checked”) method

This example will demostrate you how use jquery :checked selector method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Checked Radio Button Value</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btn-get").click(function(){
            var rVal = $(".rbtn:checked").val();
            if(rVal){
                alert("Your are a - " + rVal);
            }
        });

    });
</script>
<style>
.ctrCls{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}
</style>
</head>
<body>
    <div class="ctrCls">
    <h4>Please select your gender.</h4>
    <p>
        <label><input type="radio" name="gender" value="male" class="rbtn">Male</label>
        <label><input type="radio" name="gender" value="female" class="rbtn">Female</label>
    </p>
    <p><input type="button" value="Get Value" id="btn-get"></p>
     </div>
</body>
</html>                            

Output

Get Checked Radio Button Value

Please select your gender.

Recommended MySQL Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *