Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Get Radio Button Value jQuery
3.
Frequently Asked Questions
3.1.
Why is a such button called a radio button?
3.2.
What is the difference between a radio button and a checkbox??
3.3.
What is the data type of the radio button?
4.
Conclusion
Last Updated: Mar 27, 2024
Easy

Get Radio Button Value JQuery

Author Urwashi Priya
0 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Welcome Ninja!! We have come up with yet another article on JQuery. Let’s start discussing what JQuery is. This is an essential tool used in designing the front end. JQuery is used to simplify, shorten and beautify the codes written in Javascript. JQuery also plays an important role in DOM manipulation. DOM manipulation includes changing HTML elements, CSS elements, zooming in elements, zooming out elements, animating elements, and many more.

Now let’s understand what a radio button is. Radio buttons are generally used to take input from users. By using this, we can select one option out of multiple options.

radio button

So, now let’s start understanding how to get radio button value jquery.

Get Radio Button Value jQuery

For beginners, it becomes difficult to get the radio button value jQuery. Let’s use jquery to list the days of the week. 

To extract the value of the radio button, just use:

$('input[type="typeAssigned"]:checked').val();
or
$('input[name="nameGivenToTheRadiobutton"]:checked').val();

 


<!DOCTYPE html>
<html>
<head>
    <title>Days of the week</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <input type="radio" value="monday"> Monday
    <input type="radio" value="tuesday"> Tuesday
    <input type="radio" value="wednesday"> Wednesday
    <input type="radio" value="thursday"> Thursday
    <input type="radio" value="friday"> Friday
    <input type="radio" value="saturday"> Saturday
    <input type="radio" value="sunday"> Sunday
    <button>Get Value</button>

    <script type="text/javascript">
        $("button").click(function() {
            var val = $("input[type='radio']:checked").val();
            alert(val);
        });
    </script>

</body>
</html>

 

output img 1
output img screen


Here, the head tag is used to display the title. In the body, we have listed the seven days of the week, and under the script tag, we have written the code to extract the value of the radio button.

We can also get the radio button value jquery using id.



<!DOCTYPE html>
<html>

<head>
    <title>Days of the week</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <input type="radio" id="weekday" value="monday"> Monday
    <input type="radio" id="weekday" value="tuesday"> Tuesday
    <input type="radio" id="weekday" value="wednesday"> Wednesday
    <input type="radio" id="weekday" value="thursday"> Thursday
    <input type="radio" id="weekday" value="friday"> Friday
    <input type="radio" id="weekday" value="saturday"> Saturday
    <input type="radio" id="weekday" value="sunday"> Sunday
    <button>Get Value</button>

    <script type="text/javascript">
        $("button").click(function() {
            var val = $("#weekday:checked").val();
            alert(val);
        });
    </script>

</body>

</html>

 

output img 2

 

output img screen



We can also get the radio button value jquery using class.

 

<!DOCTYPE html>
<html>

<head>
    <title>Days of the week</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <input type="radio" class="weekday" value="monday"> Monday
    <input type="radio" class="weekday" value="tuesday"> Tuesday
    <input type="radio" class="weekday" value="wednesday"> Wednesday
    <input type="radio" class="weekday" value="thursday"> Thursday
    <input type="radio" class="weekday" value="friday"> Friday
    <input type="radio" class="weekday" value="saturday"> Saturday
    <input type="radio" class="weekday" value="sunday"> Sunday
    <button>Get Value</button>

    <script type="text/javascript">
        $("button").click(function() {
            var val = $(".weekday:checked").val();
            alert(val);
        });
    </script>

</body>

</html>

 

output img 3
output img screen

 

We can also get the radio button value jquery using change event

 

<!DOCTYPE html>
<html>

<head>
    <title>Days of the week</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <input type="radio" class="weekday" value="monday"> Monday
    <input type="radio" class="weekday" value="tuesday"> Tuesday
    <input type="radio" class="weekday" value="wednesday"> Wednesday
    <input type="radio" class="weekday" value="thursday"> Thursday
    <input type="radio" class="weekday" value="friday"> Friday
    <input type="radio" class="weekday" value="saturday"> Saturday
    <input type="radio" class="weekday" value="sunday"> Sunday
    <button>Get Value</button>

    <script type="text/javascript">
        $(".weekday").change(function() {
            var val = $(".weekday:checked").val();
            alert(val);
        });
    </script>
</body>
</html>

 

output img 4
output img screen

Try and compile by yourself with the help of online javascript compiler for better understanding.

It's time to discuss some FAQs related to the Get Radio Button Value JQuery.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

Why is a such button called a radio button?

It is called so because it is visible like radio and all options are like channels on radios.

What is the difference between a radio button and a checkbox??

Checkboxes allow us to select multiple options, whereas the radio button selects only a single option.

What is the data type of the radio button?

Radio buttons are created using the input tag “<input>” using radio as the type attribute.

Refer to know about:   jquery ajax

Conclusion

We have discussed the get radio button value jquery, using four ways by taking the examples of the days of the week.

After reading about the get radio button value jquery, are you not feeling excited to read/explore more articles?? See JavaBasics of JavaJava AWTJava AWT Basics, and Spring Boot to learn. Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and AlgorithmsCompetitive ProgrammingJavaScriptSystem Design, and many more! 

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!

Previous article
How to Create a Simple Map Using JQuery
Next article
Function Execution in JavaScript
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass