How to Make a Radio Button Unchecked by Clicking It

How to uncheck a radio button?

either (plain js)

this.checked = false;

or (jQuery)

$(this).prop('checked', false);
// Note that the pre-jQuery 1.6 idiom was
// $(this).attr('checked', false);

See jQuery prop() help page for an explanation on the difference between attr() and prop() and why prop() is now preferable.

prop() was introduced with jQuery 1.6 in May 2011.

Radio Button Does Not Unchecked When Clicking On Itself

Radio buttons are distinct from checkboxes. The user can change options between a set of radio buttons, but it cannot be deselected.

You can refer to this answer for a better explanation as to Why is it impossible to deselect HTML "radio" inputs?

PS. This applies to native HTML radio buttons. You can still use a checkbox for this purpose, or create your own buttons with CSS and Javascript that behave the same way.

How to uncheck a radio button by clicking it again in vanilla js

you should use event click bcuz change didn't invoke when radio has checked true

     // Array inputs
    const ratings = document.querySelectorAll('input[name=rating]');

    // Array false & true.
    const array = [];

    for(let i = 0; i < ratings.length; i++)
    {
      array[i] = false;
      // create event handler onClick
      ratings[i].addEventListener('click',function()
      {
          //if item has checked before
          if(array[i] == true)
          {
            ratings[i].checked = false;
            array[i] = false;
            return; // return or will set to ture value
          }
          // set to true.
          array[i] = true;
      });
    }

more here:https://jsfiddle.net/t2u5dgeb/45/

How to check/uncheck radio button on click?

This is not to replace a checkbox, it's to allow a radio group to go back to an unselected state. This was tricky because the radio selection doesn't act like a normal event.

The browser handles radio buttons outside the normal event chain. So, a click handler on a radiobutton with event.preventDefault() or event.stopPropagation() will NOT prevent the radiobutton from being checked. The .removeAttr('checked') must be done in a setTimeout to allow the event to finish, and the browser to check the radiobutton (again), and then the setTimeout will fire.

This also correctly handles the case where a user starts the mousedown but leaves the radiobutton before mouseup.

//$ = jQuery;
$(':radio').mousedown(function(e){
  var $self = $(this);
  if( $self.is(':checked') ){
    var uncheck = function(){
      setTimeout(function(){$self.removeAttr('checked');},0);
    };
    var unbind = function(){
      $self.unbind('mouseup',up);
    };
    var up = function(){
      uncheck();
      unbind();
    };
    $self.bind('mouseup',up);
    $self.one('mouseout', unbind);
  }
});

I hope this helps

Radio button uncheck on second click

I'll suggest to add a custom attribute to keep track of each radio's previous state like so:

$(function(){
    $('input[name="rad"]').click(function(){
        var $radio = $(this);

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        }
        else
            $radio.data('waschecked', true);

        // remove was checked from other radios
        $radio.siblings('input[name="rad"]').data('waschecked', false);
    });
});

You will also need to add this attribute to the initially checked radio markup

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />

JSFIDDLE DEMO

UPDATE:

 $(function(){
        $('input[name="rad"]').click(function(){
            var $radio = $(this);

            // if this was previously checked
            if ($radio.data('waschecked') == true)
            {
                $radio.prop('checked', false);
                $radio.data('waschecked', false);
            }
            else
                $radio.data('waschecked', true);

            // remove was checked from other radios
            $radio.siblings('input[type="radio"]').data('waschecked', false);
        });
    });

But do ensure that you don't have other radio-groups to work with, otherwise you have to provide some attributes to specify these buttons like name prop I focused earlier.

radio buttons won't check / uncheck

They all have different name attribute values - therefore they can only be checked (because they're not comparing to another sibling radio value). I think you might be looking for type="checkbox" instead:

<input type="checkbox" id="name" name="name"><br>
<input type="checkbox" id="age" name="age"><br>
<input type="checkbox" id="email" name="email"><br>

Uncheck a radio button after clicking on it again

<script>
    window.onload=function(){
      toggle0=1;
      btn0=document.getElementById("button1");
      btn0.addEventListener("click", function(e){

        if(toggle0==0){
            toggle0=1
            btn0.checked=false;
            }else{
                toggle0=0;
            btn0.checked=true;
            }

      });

        }
</script>

---

Related Topics