DEV Community

Cover image for 3 Method To Get Selected Radio Button Value in jQuery
Code And Deploy
Code And Deploy

Posted on • Edited on

3 3

3 Method To Get Selected Radio Button Value in jQuery

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/3-method-to-get-selected-radio-button-value-in-jquery

Advanced Laravel SAAS Starter Kit with CRUD Generator

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

Do want to add radio button to your form but don't have any idea how to get the value using jquery? This post is for you I will share 3 methods on how to get the radio button selected value when clicking the button event.

First Method

Getting radio button value using class

// Method #1 - Getting radio selected using class
$("#btnSubmit1").on("click", function() {
    var membership = $(".membership1:checked").val();

    alert(membership);
});
Enter fullscreen mode Exit fullscreen mode

Second Method

Getting radio button selected value using attribute name with value

// Method #2 - Getting radio selected value using attribute name & value
$("#btnSubmit2").on("click", function() {
    var membership = $("[name=\"membership2\"]:checked").val();

    alert(membership);
});
Enter fullscreen mode Exit fullscreen mode

Third Method

Getting radio selected value using attribute type & value "[name=\"radio\"]:checked"

// Method #3 - Getting radio selected value using attribute type & value "[name=\"radio\"]:checked"
$("#btnSubmit3").on("click", function() {
    var membership = $("[type=\"radio\"]:checked").val();

    alert(membership);
});
Enter fullscreen mode Exit fullscreen mode

Take note that the third method is reading all the radio button within the page better to call the radio button element using method #1 and #2. I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery/3-method-to-get-selected-radio-button-value-in-jquery if you want to download this code.

Advanced Laravel SAAS Starter Kit with CRUD Generator

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

Happy coding :)

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit