Deselect radio type input

Question

I have two inputs of the kind radio. Follow the code below:

 <input type="radio" id="isgift0" name="isgift" value="0" class="arredondado" /> 
 <label for="isgift0">Teste 1</label>

 <input type="radio" id="isgift1" name="isgift" value="1" style="display: none;" /> 
 <label for="isgift1">Teste 2</label>

And I have the following code on jQuery:

$j('input[name=isgift]').click(function(){
    if($j('#isgift1').is(':checked')){
        $j(".gift-from").val(name_from);
        $j(".gift-to").val(name_to);
        $j(".mensagem-pedido").removeClass("divDisabled");
        $j(".box-gift").addClass("divActive");
        $j('#allow-gift-messages-for-order-container').show();
    }
    else if($j('#isgift0').is(':checked')){
        $j(".gift-from").val('Anônimo');
        $j(".gift-to").val(name_to);
        $j(".box-gift").removeClass("divActive");
        $j(".mensagem-pedido").addClass("divDisabled");
    }

How they are ìnputs of the kind radio And with the same names, you can only mark one of the two. But I needed to do something else that I’m not getting. I wish when the first ìnput,in the case with the id=isgift0, if it was marked and the user clicked on it, it was unchecked. I wanted to do this only for this input.

Answer 1

Only the function to enable/disable the first "radio input"

$(function() {
    var check1 = 0;
    $('input[name=isgift]').click(function() {
        if($('#isgift1').is(':checked')){
           check1 = 0;
        }
        if ($('#isgift0').is(':checked')) {
            if(check1 != 0) { 
                $(this).prop('checked', false);
                check1 = 0;
            } else {
                check1 = 1;
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="isgift0" name="isgift" value="0" class="arredondado" /> 
<label for="isgift0">Teste 1</label>

<input type="radio" id="isgift1" name="isgift" value="1" /> 
<label for="isgift1">Teste 2</label>

Now "trying to run" with the code snippet reported in the question:

var $j = $;
var check1 = 0;
$j('input[name=isgift]').click(function(){
    if($j('#isgift1').is(':checked')){
        check1 = 0;
        $j(".gift-from").val(name_from);
        $j(".gift-to").val(name_to);
        $j(".mensagem-pedido").removeClass("divDisabled");
        $j(".box-gift").addClass("divActive");
        $j('#allow-gift-messages-for-order-container').show();
    }
    else if($j('#isgift0').is(':checked')){
        if(check1 != 0) { 
            $j(this).prop('checked', false);
            check1 = 0;
        } else {
            check1 = 1;
        }
        $j(".gift-from").val('Anônimo');
        $j(".gift-to").val(name_to);
        $j(".box-gift").removeClass("divActive");
        $j(".mensagem-pedido").addClass("divDisabled");
    }
});

 <input type="radio" id="isgift0" name="isgift" value="0" class="arredondado" />
 <label for="isgift0">Teste 1</label>
 <input type="radio" id="isgift1" name="isgift" value="1" style="display: none;" />
 <label for="isgift1">Teste 2</label>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

With the function below, only the first radio is unchecked by clicking it again (run the test and see the messages in console log.. Every click on one radio executes a function block):

function exibirGift(){
              $('#allow_gift_messages').attr('checked','checked');
              $('#allow_gift_messages_for_order').attr('checked','checked');
              $('#gift-message-whole-message').attr('disabled',false);
              //$j('#allow_gift_messages_for_items').attr('checked','checked');
              $('#allow-gift-message-container').show();
              $('#allow-gift-messages-for-items-container').show();
            }
            function esconderGift(){
              $('#allow_gift_messages').attr('checked',false);
              $('#allow_gift_messages_for_order').attr('checked',false);
              $('#gift-message-whole-message').attr('disabled','disabled');
              //$j('#allow_gift_messages_for_items').attr('checked',false);
              $('#allow-gift-message-container').hide();
              $('#allow-gift-messages-for-items-container').hide();
            }
             var checado = false;
            $('input[name=isgift]').click(function(){
              var check1 = 0;
              var name_from = $(".nomeb").val();
              var name_to = $(".nomea").val();
              var isCartaoAdicionadoPagina = $('#cartao_adicionado_radio_productId').val();
              var isCartaoAdicionadoVerificacaoMensagem = $('#cartao_adicionado_product_id').val();
              if($(this).attr('id') != 'isgift0'){
                checado = false;
                //      $j(".gift-from").val(name_from);
                //      $j(".gift-to").val(name_to);
                //      $j(".mensagem-pedido").removeClass("divDisabled");
                //      $j(".box-gift").addClass("divActive");
                //      $j('#allow-gift-messages-for-order-container').show();
                console.log("2 marcado");
              }else{
                if(!checado){
                  this.checked = true

                  //        $j(".gift-from").val('Anônimo');
                  //        $j(".gift-to").val(name_to);
                  //        $j(".box-gift").removeClass("divActive");
                  //        $j(".mensagem-pedido").addClass("divDisabled");
                  console.log("1 marcado");
                }else{
                  this.checked = false;
                  console.log("1 desmarcado");
                }
                checado = this.checked;
              }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="isgift0" name="isgift" value="0" /> 
<label for="isgift0">Teste 1</label>

<input type="radio" id="isgift1" name="isgift" value="1" /> 
<label for="isgift1">Teste 2</label>

Answer 3

I created a snippet and share here:

// itera com método do Array para compatibilidade
Array.prototype.forEach.call(document.querySelectorAll('[type=radio]'), function(radio) {
  radio.addEventListener('click', function() {
    var self = this;
    // obter elementos com o mesmo nome exceto o próprio e grava estado desmarcado
    Array.prototype.filter.call(document.getElementsByName(this.name), function(filterEl) {
      return self !== filterEl;
    }).forEach(function(otherEl) {
      delete otherEl.dataset.check
    })

    // grava estado baseado no estado anterior
    if (this.dataset.hasOwnProperty('check')) {
      this.checked = false
      delete this.dataset.check
    } else {
      this.dataset.check = ''
    }
  }, false)
})

// versão jQuery:
/*
$('[type=radio]').on('click', function(e) {
  $('[name=' + this.name + ']').not(this).data('check', false)
  if ($(this).data('check')) this.checked = false
  $(this).data('check', this.checked)
})
*/

<label><input type="radio" name="foo" value="1"/>foo = 1</label><br/>
<label><input type="radio" name="foo" value="2"/>foo = 2</label><br/>
<label><input type="radio" name="foo" value="3"/>foo = 3</label><br/>
<br/>
<label><input type="radio" name="bar" value="1"/>bar = 1</label><br/>
<label><input type="radio" name="bar" value="2"/>bar = 2</label><br/>
<label><input type="radio" name="bar" value="3"/>bar = 3</label><br/>