DEV Community

Cover image for How to unchecked a radio button using JavaScript/jQuery?
Code And Deploy
Code And Deploy

Posted on • Edited on

5 3

How to unchecked a radio button using JavaScript/jQuery?

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/how-to-unchecked-a-radio-button-using-javascriptjquery

Advanced Laravel SAAS Starter Kit with CRUD Generator

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

In this post, I will share with you how to uncheck the checked radio button using the button click event in jquery. We are using element.prop("checked",false) so that the radio button checked will be unchecked.

Before

how-to-unchecked-a-radio-button-using-javascriptjquery

After

how-to-unchecked-a-radio-button-using-javascriptjquery

Here is the example code below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>How to unchecked a radio button using JavaScript/jQuery?</title>
</head>
<body>
    <h1>How to unchecked a radio button using JavaScript/jQuery?</h1>

    <form id="form1">


        <p><b>Current Status</b></p>
        <input type="radio" value="1" name="status" class="status" checked> Active

        <br/><br/>

        <button type="button" id="btnSubmit">Deactivate</button>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnSubmit").on("click", function() {
                var status = $(".status");
                status.prop("checked", false);
            });
        });
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery/how-to-unchecked-a-radio-button-using-javascriptjquery 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 I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay