How To Uncheck Radio Button In Jquery

by

Although radio buttons are designed for single selection only and it’s not a common practice to uncheck them using jQuery, there are situations where it might be necessary to do so. In this blog post, we will learn how to uncheck a radio button using jQuery.

Prerequisites

Before we proceed, make sure you have a basic understanding of HTML, CSS, and JavaScript. Also, you’ll need to include the jQuery library in your project. You can use the following CDN link to include the latest version of jQuery:

<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>

HTML Structure

First, let’s create a simple form with radio buttons:

<form id=”myForm”>
<input type=”radio” name=”choice” value=”option1″ id=”option1″> Option 1<br>
<input type=”radio” name=”choice” value=”option2″ id=”option2″> Option 2<br>
<input type=”radio” name=”choice” value=”option3″ id=”option3″> Option 3<br>
<button type=”button” id=”clearBtn”>Clear Selection</button>
</form>

Here we have a form with three radio buttons having the same name attribute “choice” and a button to clear the selection. Now let’s write the jQuery code to uncheck the radio buttons.

jQuery Code

To uncheck the radio buttons using jQuery, we can use the prop() method. First, we’ll add a click event listener to the “Clear Selection” button. When the button is clicked, we’ll use the prop() method to set the “checked” property of all radio buttons in the form to false.

<script>
$(“#clearBtn”).click(function() {
$(“#myForm input[type=’radio’]”).prop(“checked”, false);
});
</script>

Now, when you click the “Clear Selection” button, all radio buttons in the form will be unchecked.

Conclusion

In this blog post, we learned how to uncheck radio buttons using jQuery. Although it’s not a common practice to uncheck radio buttons since they are designed for single selection only, you can use the method shown above when the need arises. Just keep in mind that this approach may not be ideal for all situations, and it’s essential to consider the user experience before implementing it.