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 :)

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay