How to Set Radio Button Checked Based on Value in jquery

In this tutorial, you will learn how to set the radio button checked based on its value in jquery.

We will first create the radio button and then set the radio button checked based on the value.

This is one of the common things wherein jquery we have to set radio button checked based on value,

Let’s jump to the solution.

Step 1: Create Radio Buttons

First of all, we will create the radio buttons. I am creating two radio buttons with the class food for pizza and burger.

<input type="radio" name="food" class="food" value="pizza"> Pizza
<input type="radio" name="food" class="food" value="burger"> Burger

Step 2: Set the radio button checked based on value

Here we are selecting the food radio button that has the value pizza.

$('.food[value="pizza"]').prop('checked', true);

Here we are selecting the food radio button that has the value burger.

$('.food[value="burger"]').prop('checked', true);

Bonus: Set the radio button checked based on Dynamic value

Now there can be a case where we have the dynamic value itself. Here is following code on how you will set the dynamic value

let radio_value="pizza";
$(".food[value="+radio_value+"]").prop('checked', true);

Here we have the pizza value is dynamic.

Conclusion:

Hope you have learned how to to set the radio button checked based on its value in jquery.

I hope this blog post was helpful to you and if you have any questions please write in the comment box.

See you soon in another tutorial.