Error checking radio with if

Question

I’m trying to do a simple check of if and Else, but I’m not getting it, because it only returns as true when actually in the case I’m trying to test it was to return false.

Keep going like I’m trying:

function FinalizarCompra(){
  var ainput = document.formMonteCaixa.creditCard.checked;
  var ainput2 = document.formMonteCaixa.creditCard2.checked;
  var ainput3 = document.formMonteCaixa.creditCard3.checked;
  var ainput4 = document.formMonteCaixa.creditCard4.checked;
  var ainput5 = document.formMonteCaixa.creditCard5.checked;
  if(ainput5 == false){
    alert('Por favor, selecione o Tipo de Endereço.');
    alert(ainput5);
  }else{
    alert('funciono');
    alert(ainput5);
  }
}

I’m calling this function by a click of a button that’s out of that could be what’s causing this?

HTML of the radio part

<div class="ModeloCaixaBloco1 cc-selector">
    <p><strong>ESCOLHA O MODELO DE SUA CAIXA</strong></p>  
        <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4A">
          <input id="Caixa Basica" alt="Caixa Basica" title="Caixa Basica" type="radio" name="creditCard" value="20" onclick="calcularPrimeiro()" />
          <label class="drinkcard-cc caixaBasica" alt="Caixa Basica" title="Caixa Basica" for="Caixa Basica"></label>
          <span>Básica</span>
        </div>
        <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4B">
          <input id="Caixa Premium" alt="Caixa Premium" title="Caixa Premium" type="radio" name="creditCard" value="40" onclick="calcularPrimeiro()" />
          <label class="drinkcard-cc caixaPremium" alt="Caixa Premium" title="Caixa Premium" for="Caixa Premium"></label>
          <span>Premium</span>
        </div>
        <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4C">
          <input id="Caixa Cesta" alt="Caixa Cesta" title="Caixa Cesta" type="radio" name="creditCard" value="50" onclick="calcularPrimeiro()" />
          <label class="drinkcard-cc caixaCesta" alt="Caixa Cesta" title="Caixa Cesta" for="Caixa Cesta"></label>
          <span>Cesta</span>
        </div>
        <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4D">
          <input id="Caixa 50 Tons" alt="Caixa 50 Tons" title="Caixa 50 Tons" type="radio" name="creditCard" value="160" onclick="calcularPrimeiro()" />
          <label class="drinkcard-cc caixa50Tons" alt="Caixa 50 Tons" title="Caixa 50 Tons" for="Caixa 50 Tons"></label>
          <span>50 Tons</span>
        </div>
    </div>

It is not the complete, because it would be very extensive, but the other blocks are practically the same.

Answer 1

What you should do is check if the radio returns a value, and is not checked, as they are multiple.

Do this way to validate by changing the checked for value:

function FinalizarCompra(){
  var ainput = document.formMonteCaixa.creditCard.value;
//  var ainput2 = document.formMonteCaixa.creditCard2.checked;
//  var ainput3 = document.formMonteCaixa.creditCard3.checked;
//  var ainput4 = document.formMonteCaixa.creditCard4.checked;
//  var ainput5 = document.formMonteCaixa.creditCard5.checked;
  if(ainput == false){
    alert('Por favor, selecione o Tipo de Endereço.');
    alert(ainput);
  }else{
    alert('funciono');
    alert(ainput);
  }
}

// só para não dar erro
function calcularPrimeiro(){}

<form name="formMonteCaixa">
<div class="ModeloCaixaBloco1 cc-selector">
    <p><strong>ESCOLHA O MODELO DE SUA CAIXA</strong></p>  
  <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4A">
    <input id="Caixa Basica" alt="Caixa Basica" title="Caixa Basica" type="radio" name="creditCard" value="20" onclick="calcularPrimeiro()" />
    <label class="drinkcard-cc caixaBasica" alt="Caixa Basica" title="Caixa Basica" for="Caixa Basica"></label>
    <span>Básica</span>
  </div>
  <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4B">
    <input id="Caixa Premium" alt="Caixa Premium" title="Caixa Premium" type="radio" name="creditCard" value="40" onclick="calcularPrimeiro()" />
    <label class="drinkcard-cc caixaPremium" alt="Caixa Premium" title="Caixa Premium" for="Caixa Premium"></label>
    <span>Premium</span>
  </div>
  <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4C">
    <input id="Caixa Cesta" alt="Caixa Cesta" title="Caixa Cesta" type="radio" name="creditCard" value="50" onclick="calcularPrimeiro()" />
    <label class="drinkcard-cc caixaCesta" alt="Caixa Cesta" title="Caixa Cesta" for="Caixa Cesta"></label>
    <span>Cesta</span>
  </div>
  <div class="ModeloCaixaBloco1Col4 ModeloCaixaBloco1Col4D">
    <input id="Caixa 50 Tons" alt="Caixa 50 Tons" title="Caixa 50 Tons" type="radio" name="creditCard" value="160" onclick="calcularPrimeiro()" />
    <label class="drinkcard-cc caixa50Tons" alt="Caixa 50 Tons" title="Caixa 50 Tons" for="Caixa 50 Tons"></label>
    <span>50 Tons</span>
  </div>
</div>
</form>
<button onclick="FinalizarCompra()">Finalizar compra</button>