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>