Check if a radio has been checked

Asked

Viewed 47 times

0

I am doing a quiz and would like a code that checks if the radio was selected, if it was not selected give a message "select at least one response"

    <body>
        <h1 id="titulo">Quizz Game Of Thrones</h1>
        <hr>
        <div id = "container" name ="div1">
            <section id = "perguntas">
                <h2>Pergunta 1 de 10</h2>
                <h2 id="nr_pergunta">Qual o nome dos três dragões de Daenerys Targaryen?</h2>
                <ul>
                    <li>
                        <input name="alternativa" id="resp1" class="alt_certa" type="radio">
                        <label for="resp1">Drogon, Viserion e Rhaegal</label>

                    </li>
                    <li>
                        <input name="alternativa" id="resp2" type="radio">
                        <label for="resp2">Rhaego, Viserys e Drogo.</label>



                    </li>
                    <li>
                        <input name="alternativa" id="resp3" type="radio">
                        <label for="resp3">Drogon, Viserys e Aegon.</label>



                    </li>
                </ul>
            <button id="avanca">Avançar</button>

            </section>
        </div>


    </body>

    var perguntas_vet = [    
    {id_perg: 1, pergunta: 'Qual o nome dos três dragões de Daenerys Targaryen? ', alt1: 'Drogon, Viserion e Rhaegal', alt2:'Drogon, Viserys e Aegon.', alt3:'Rhaego, Viserys e Drogo.'}, 

    {id_perg: 2, pergunta: 'Qual o nome da espada dada a Jon Snow, pelo comandante da patrulha da noite?', alt1:'Garralonga', alt2:'Luminífera', alt3: 'Fantasma'}, 

    {id_perg: 3, pergunta: 'Qual o lema, em inglês, da casa Arryn?', alt1:'Family, Duty, Honor', alt2:'As High As Honor', alt3:'Our Blades are Sharp'}, 

    {id_perg: 4, pergunta: 'Quem foi o primeiro a se sentar no trono após a morte do Rei Louco?', alt1: 'Jaime Lannister', alt2:'Robert Baratheon', alt3: 'Ned Stark'},

    {id_perg: 5, pergunta: 'Qual o nome da espada de Arya, recebida por Jon Snow?', alt1:'Nymeria', alt2:'Agulha', alt3: 'Lady'}, 

    {id_perg:6, pergunta:'Quem foi que matou Jon Arryn?', alt1:'Lysa Arryn', alt2:'Joffrey Baratheon', alt3: 'Cersei Lannister'},

    {id_perg: 7, pergunta: 'Qual foi o adjetivo dado ao primeiro Targaryen a se tornar rei de Westeros?', alt1: 'Aegon, o Libertador', alt2: 'Aegon, o Dragão', alt3: 'Aegon, o Conquistador'},

    {id_perg: 8, pergunta: 'Por que Robert se tornou rei após a morte do Rei louco?', alt1:'Por ser ele quem matou o Príncipe Rhaegar, que era reconhecido como um dos maiores cavaleiros do reino.', alt2: 'Devido a ter uma ligação sanguínea com os Targaryen, a sua reivindicação ao trono era maior do que os outros participantes da rebelião.', alt3: 'Por seus grandes feitos em batalha, que o fez cativar diversas pessoas, e até mesmo a transformar antigos inimigos em aliados.'}, 

    {id_perg: 9, pergunta: 'Quais são os poderes de Bran Stark?', alt1: 'Vidente verde', alt2: 'Warg', alt3: 'Warg e Vidente verde'},

    {id_perg: 10, pergunta: 'Qual a música tocada no Casamento Vermelho, que alertou a todos a iniciar o massacre?', alt1: 'Winter has come', alt2: 'The Rains of Castamere', alt3: 'The North Remembers'}];

var resposta_usuario = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,];
var resposta_gabarito = ["resp1", "resp1", "resp2", "resp1", "resp2", "resp1", "resp3", "resp2", "resp3", "resp2"];
var pontuacao = 0, fim, resp1, resp2, resp3, avanca, pergutnas, nr_pergunta, cont = 0, finaliza;
window.onload = padrao;
function padrao (){

    resp1 = document.getElementById("resp1");
    resp2 = document.getElementById("resp2");
    resp3 = document.getElementById("resp3");
    perguntas = document.getElementById("perguntas");   
    avanca = document.getElementById("avanca");
    resp1.onclick = selecionaResp;
    resp2.onclick = selecionaResp;
    resp3.onclick = selecionaResp;
    avanca.onclick = mostraPerguntas;

}

function selecionaResp(){
    resposta_usuario[cont] = event.target.id;
}

function corrigeResp(){
        if (confirm("Tem certeza que deseja finalizar a tentativa?") == true){
            perguntas.innerHTML = ""
            for (var i =0; i<resposta_usuario.length;i++){
                if(resposta_gabarito[i]==resposta_usuario[i]){
                    pontuacao +=1;
                    perguntas.insertAdjacentHTML('afterbegin', "<p>Pergunta "+(i+1)+" Correta!</p>");
                }

                else if (resposta_gabarito[i]!=resposta_usuario[i]){
                    perguntas.insertAdjacentHTML('afterbegin', "<p>Pergunta "+(i+1)+" Incorreta!</p>");
                }
            }

        perguntas.insertAdjacentHTML('afterbegin', "<h3>Pontuação: "+pontuacao+" de 10</h3>");
        }

}






function mostraPerguntas(){
    if(event.target.id=="avanca") cont++;
    else cont--;
    if(cont == perguntas_vet.length) cont = 0;
    if(cont < 0)cont = perguntas_vet.length -1;

    perguntas.innerHTML = '<h2 id="nr_pergunta">Perunta: '+(cont+1)+ ' de 10</h2>' +
                          '<h2 id="ti_pergunta">'+(perguntas_vet[cont].pergunta)+ '</h2>' +
                          '<ul>'+
                          '<li><input name="alternativa" id="resp1" type="radio"><label for="resp1">'+ (perguntas_vet[cont].alt1)+'</label></li>'+
                          '<li><input name="alternativa" id="resp2" type="radio"><label for="resp2">'+ (perguntas_vet[cont].alt2)+'</label></li>'+ 
                          '<li><input name="alternativa" id="resp3" type="radio"><label for="resp3">'+ (perguntas_vet[cont].alt3)+'</label></li>'+
                          '</ul>'+
                          '<button id="avanca">Avancar</button>';
    if (cont==9){
        perguntas.insertAdjacentHTML('beforeend', '<button id="finaliza">Finalizar tentativa</button>')
        finaliza = document.getElementById("finaliza");
        finaliza.onclick = corrigeResp;

    }


    resp1 = document.getElementById("resp1");
    resp2 = document.getElementById("resp2");
    resp3 = document.getElementById("resp3");
    perguntas = document.getElementById("perguntas");   
    avanca = document.getElementById("avanca");
    finaliza = document.getElementById("finaliza");
    resp1.onclick = selecionaResp;
    resp2.onclick = selecionaResp;
    resp3.onclick = selecionaResp;
    avanca.onclick = mostraPerguntas;


}
javascript html web-application

2 answers

0

You can do this with a simple check on JS. If all the checked were false, it displays the alert message and does not let the form complete the submission. In case one of radios are selected, it does not enter the if and complete sending the form:

function testar(){
  alt1 = document.getElementById("alt1");
  alt2 = document.getElementById("alt2");
  alt3 = document.getElementById("alt3");

  if(alt1.checked == false && alt2.checked == false && alt3.checked == false) {
    alert("Selecione ao menos uma resposta");
    return false;
  }
  else{
    form.submit();
  }
}
<form id="form" onsubmit="testar(this); return false;">
  <input type="radio" name="alter" id="alt1"> Alternativa 1
  <input type="radio" name="alter" id="alt2"> Alternativa 2
  <input type="radio" name="alter" id="alt3"> Alternativa 3
  <button>Enviar</button>
</form>

0


Clicking "Next" is called the function mostraPerguntas(). Then put the code below at the beginning of this function:

// verifica radios
var pergs = document.getElementById("perguntas");
var resp = pergs.querySelector("[type=radio]:checked");
if(!resp){
   alert("selecione ao menos uma resposta");
   return;
}

The variable resp will try to select any radiobutton marked. If there is none, it will return false and will display Alert as well as leaving the function with return.

Behold:

var perguntas_vet = [    
    {id_perg: 1, pergunta: 'Qual o nome dos três dragões de Daenerys Targaryen? ', alt1: 'Drogon, Viserion e Rhaegal', alt2:'Drogon, Viserys e Aegon.', alt3:'Rhaego, Viserys e Drogo.'}, 

    {id_perg: 2, pergunta: 'Qual o nome da espada dada a Jon Snow, pelo comandante da patrulha da noite?', alt1:'Garralonga', alt2:'Luminífera', alt3: 'Fantasma'}, 

    {id_perg: 3, pergunta: 'Qual o lema, em inglês, da casa Arryn?', alt1:'Family, Duty, Honor', alt2:'As High As Honor', alt3:'Our Blades are Sharp'}, 

    {id_perg: 4, pergunta: 'Quem foi o primeiro a se sentar no trono após a morte do Rei Louco?', alt1: 'Jaime Lannister', alt2:'Robert Baratheon', alt3: 'Ned Stark'},

    {id_perg: 5, pergunta: 'Qual o nome da espada de Arya, recebida por Jon Snow?', alt1:'Nymeria', alt2:'Agulha', alt3: 'Lady'}, 

    {id_perg:6, pergunta:'Quem foi que matou Jon Arryn?', alt1:'Lysa Arryn', alt2:'Joffrey Baratheon', alt3: 'Cersei Lannister'},

    {id_perg: 7, pergunta: 'Qual foi o adjetivo dado ao primeiro Targaryen a se tornar rei de Westeros?', alt1: 'Aegon, o Libertador', alt2: 'Aegon, o Dragão', alt3: 'Aegon, o Conquistador'},

    {id_perg: 8, pergunta: 'Por que Robert se tornou rei após a morte do Rei louco?', alt1:'Por ser ele quem matou o Príncipe Rhaegar, que era reconhecido como um dos maiores cavaleiros do reino.', alt2: 'Devido a ter uma ligação sanguínea com os Targaryen, a sua reivindicação ao trono era maior do que os outros participantes da rebelião.', alt3: 'Por seus grandes feitos em batalha, que o fez cativar diversas pessoas, e até mesmo a transformar antigos inimigos em aliados.'}, 

    {id_perg: 9, pergunta: 'Quais são os poderes de Bran Stark?', alt1: 'Vidente verde', alt2: 'Warg', alt3: 'Warg e Vidente verde'},

    {id_perg: 10, pergunta: 'Qual a música tocada no Casamento Vermelho, que alertou a todos a iniciar o massacre?', alt1: 'Winter has come', alt2: 'The Rains of Castamere', alt3: 'The North Remembers'}];

var resposta_usuario = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,];
var resposta_gabarito = ["resp1", "resp1", "resp2", "resp1", "resp2", "resp1", "resp3", "resp2", "resp3", "resp2"];
var pontuacao = 0, fim, resp1, resp2, resp3, avanca, pergutnas, nr_pergunta, cont = 0, finaliza;
window.onload = padrao;
function padrao (){

    resp1 = document.getElementById("resp1");
    resp2 = document.getElementById("resp2");
    resp3 = document.getElementById("resp3");
    perguntas = document.getElementById("perguntas");   
    avanca = document.getElementById("avanca");
    resp1.onclick = selecionaResp;
    resp2.onclick = selecionaResp;
    resp3.onclick = selecionaResp;
    avanca.onclick = mostraPerguntas;

}

function selecionaResp(){
    resposta_usuario[cont] = event.target.id;
}

function corrigeResp(){
        if (confirm("Tem certeza que deseja finalizar a tentativa?") == true){
            perguntas.innerHTML = ""
            for (var i =0; i<resposta_usuario.length;i++){
                if(resposta_gabarito[i]==resposta_usuario[i]){
                    pontuacao +=1;
                    perguntas.insertAdjacentHTML('afterbegin', "<p>Pergunta "+(i+1)+" Correta!</p>");
                }

                else if (resposta_gabarito[i]!=resposta_usuario[i]){
                    perguntas.insertAdjacentHTML('afterbegin', "<p>Pergunta "+(i+1)+" Incorreta!</p>");
                }
            }

        perguntas.insertAdjacentHTML('afterbegin', "<h3>Pontuação: "+pontuacao+" de 10</h3>");
        }

}






function mostraPerguntas(){

// verifica radios
var pergs = document.getElementById("perguntas");
var resp = pergs.querySelector("[type=radio]:checked");
if(!resp){
   alert("selecione ao menos uma resposta");
   return;
}

    if(event.target.id=="avanca") cont++;
    else cont--;
    if(cont == perguntas_vet.length) cont = 0;
    if(cont < 0)cont = perguntas_vet.length -1;

    perguntas.innerHTML = '<h2 id="nr_pergunta">Perunta: '+(cont+1)+ ' de 10</h2>' +
                          '<h2 id="ti_pergunta">'+(perguntas_vet[cont].pergunta)+ '</h2>' +
                          '<ul>'+
                          '<li><input name="alternativa" id="resp1" type="radio"><label for="resp1">'+ (perguntas_vet[cont].alt1)+'</label></li>'+
                          '<li><input name="alternativa" id="resp2" type="radio"><label for="resp2">'+ (perguntas_vet[cont].alt2)+'</label></li>'+ 
                          '<li><input name="alternativa" id="resp3" type="radio"><label for="resp3">'+ (perguntas_vet[cont].alt3)+'</label></li>'+
                          '</ul>'+
                          '<button id="avanca">Avancar</button>';
    if (cont==9){
        perguntas.insertAdjacentHTML('beforeend', '<button id="finaliza">Finalizar tentativa</button>')
        finaliza = document.getElementById("finaliza");
        finaliza.onclick = corrigeResp;

    }


    resp1 = document.getElementById("resp1");
    resp2 = document.getElementById("resp2");
    resp3 = document.getElementById("resp3");
    perguntas = document.getElementById("perguntas");   
    avanca = document.getElementById("avanca");
    finaliza = document.getElementById("finaliza");
    resp1.onclick = selecionaResp;
    resp2.onclick = selecionaResp;
    resp3.onclick = selecionaResp;
    avanca.onclick = mostraPerguntas;


}
<h1 id="titulo">Quizz Game Of Thrones</h1>
        <hr>
        <div id = "container" name ="div1">
            <section id = "perguntas">
                <h2>Pergunta 1 de 10</h2>
                <h2 id="nr_pergunta">Qual o nome dos três dragões de Daenerys Targaryen?</h2>
                <ul>
                    <li>
                        <input name="alternativa" id="resp1" class="alt_certa" type="radio">
                        <label for="resp1">Drogon, Viserion e Rhaegal</label>

                    </li>
                    <li>
                        <input name="alternativa" id="resp2" type="radio">
                        <label for="resp2">Rhaego, Viserys e Drogo.</label>



                    </li>
                    <li>
                        <input name="alternativa" id="resp3" type="radio">
                        <label for="resp3">Drogon, Viserys e Aegon.</label>



                    </li>
                </ul>
            <button id="avanca">Avançar</button>

            </section>
        </div>

Browser other questions tagged javascript html web-application

You are not signed in. Login or sign up in order to post.