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)

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

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay