javascript – Deselect input of type radio

Question:

I have two inputs of type 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 in 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");
    }

As they are ìnputs of the radio type and with the same names, only one of the two can be marked. However, I needed to do something more than what I'm not getting. I wanted that when the first ìnput , in this case with id=isgift0 , if it was checked and the user clicked on it, it would be unchecked. I wanted to do this just for that input.

Answer:

With the function below, only the first radio is deselected when clicking it again (run the test and see the messages in console.log . Each click on a radio executes a block of the function):

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>
Post Views: 4
Scroll to Top