Uncheck radio type input

Question

Uncheck radio type input

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

I have two inputs of type radio . Here is 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");
    }

Since they are ìnputs of type radio and with the same names, you can only mark one of two. But I needed to do something more than I can not do. I wanted when the first ìnput , in case with id=isgift0 , if it was checked and the user clicked on it, it was cleared. I wanted to do this just for this input.

javascript html jquery html5 input

asked by anonymous 27.10.2017 / 21:11

2 answers

1

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

$(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><inputtype="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 snippet of code 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>

27.10.2017 / 21:27

gather multiple with 4 resulting columns "together" What are TTML files?

score 1 · Accepted Answer

With the function below, only the first radio is deselected when you click 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><inputtype="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>