DEV Community

Code And Deploy
Code And Deploy

Posted on • Edited on

2 2

How to uncheck and check a radio button using Javascript/jQuery?

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/how-to-uncheck-and-check-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 my previous post, I share how to uncheck the radio button now I will share with you how to switch the radio button to uncheck and check using the click button event in javascript/jquery. To see the sample out kindly see below.

Before

how-to-uncheck-and-check-a-radio-button-using-javascriptjquery

After

how-to-uncheck-and-check-a-radio-button-using-javascriptjquery

Example code

<!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 button = $(this);
                var status = $(".status");

                if(status.is(":checked")) {
                    status.prop("checked", false);
                    button.html("Activate");
                } else {
                    status.prop("checked", true);
                    button.html("Deactivate");
                }

            });
        });
    </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-uncheck-and-check-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 :)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay