Jump to content
Minatos™

Como manipular checkboxes usando .checked

Recommended Posts

Olá pessoal, tudo bom? recentemente eu comecei a aprender programação com JS, eu já conseguir usar o

.checkboxes 

em exercício que o professor passou, entretanto, quando fui criar outros exercícios pra treinar, pra conseguir realmente aprender, ao usar o mesmo método que o professor utilizar, o meu código não funciona.

 

Basicamente, eu quero saber quando o usuário clicar em uma opção, e em seguida fazer uma ação, o meu código abaixo é de uma pergunta com resposta, basicamente quero saber qual resposta o usuário clicou e dependendo de qual, queria informar uma mensagem na <div></div>

 

HTML: 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Modelo de exercício</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <header>   
        <h1>Pergunta do Milhão</h1>
    </header>
    <section> 
        <div id="div1">
         <center><p>O que é um sistema ERP?</p></center>
         <p><input type="radio" name="per1" id="alt1" >
         <label for="alt1">É um sistema de informação que integra todos os dados e processos de uma organização em um único sistema.</label></p>
         <p><input type="radio" name="per1" id="alt2">
         <label for="alt2">É uma instituição internacional sem fins lucrativos que associa profissionais de gestão de projetos.</label></p>
         <p><input type="radio" name="per1" id="alt3">
         <label for="alt3"> é um conjunto de práticas na gestão de projetos organizado pelo instituto PMI e é considerado a base do conhecimento sobre gestão de projetos por profissionais da área.</label></p>
         <p><input type="radio" name="per1" id="alt4" checked >
         <label for="alt4">NDA</label></p>
         <center><input type="button" value="Verificar" onclick="verificar()"></center>
        </div>
        <div id="res">
            Testando...
        </div>
    </section>
    <footer>
        <p>&copy; Alexsander Fontes</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

JS:

function verificar() {
    var pergunta = document.getElementById('per1')
    var res = document.getElementById('res')
    if (pergunta[0].checked) {
        res.innerHTML = `Testando manipulação'`
    } else if (pergunta[1].checked) {
        res.innerHTML = `Testando manipulação 1`
    } else if (pergunta[2].checked) {
        res.innerHTML = `Testando manipulação 2`
    } else if (pergunta[3].checked) {
        res.innerHTML = `Testando manipulação 3`
    }
}

E então, se eu usar:

res.innerHTML = `Testando manipulação`

 fora do IF, funciona normal, se eu por na condição, o código para. :/

Share this post


Link to post
Share on other sites

Se não for isso, perdão ! devo ter interpretado errado.

 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Modelo de exercício</title>
<!-- <link rel="stylesheet" href="estilo.css"> -->
</head>
<body>
<header>
<h1>Pergunta do Milhão</h1>
</header>
<section>
<div id="div1">
<p>O que é um sistema ERP?</p>
<p><input type="radio" name="pergunta" value="1" id="respostaUm" >
<label for="respostaUm">É um sistema de informação que integra todos os dados e processos de uma organização em um único sistema.</label></p>
<p><input type="radio" name="pergunta" value="2" id="respostaDois">
<label for="respostaDois">É uma instituição internacional sem fins lucrativos que associa profissionais de gestão de projetos.</label></p>
<p><input type="radio" name="pergunta" value="3" id="respostaTres">
<label for="respostaTres"> é um conjunto de práticas na gestão de projetos organizado pelo instituto PMI e é considerado a base do conhecimento sobre gestão de projetos por profissionais da área.</label></p>
<p><input type="radio" name="pergunta" value="4" id="nenhuma" checked >
<label for="nenhuma">NDA</label></p>
<input type="button" value="Verificar" onclick="verificar()">
</div>
<div id="res">
Testando...
</div>
</section>
<footer>
<p>&copy; Alexsander Fontes</p>
</footer>
<script src="ecma.js"></script>
</body>
</html>
 
 
 
function verificar ()
{
const respostaCorreta = 2
 
console.log ( 'verificando resposta...' )
 
let radiosElements = document.querySelectorAll ( 'input[type=radio]' )
 
// console.log ( radiosElements )
 
radiosElements.forEach ( radio => {
 
if ( radio.checked )
{
// console.log ( 'A resposta marcada foi essa:', radio.value )
 
if ( radio.value == respostaCorreta )
{
alert ( 'Parabens, reposta correta.' )
}
else
{
alert ( 'Errou trouxa.' )
}
}
 
} )
}

Share this post


Link to post
Share on other sites
1 hora atrás, winterjeferson disse:

Você está utilizando:

var pergunta = document.getElementById('per1');

Só que 'per1' não é um ID, sim um name.

Tenta mudar por:

var pergunta = document.getElementsByName("per1");

 

 

Nossa, Obrigado Mano! eu sabia que era coisa simples, revisei o código várias vezes, mas o sono deixou passar essa, Valeu! deu certinho.

 

1 hora atrás, _FelipeOlvr disse:

Se não for isso, perdão ! devo ter interpretado errado.

 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Modelo de exercício</title>
<!-- <link rel="stylesheet" href="estilo.css"> -->
</head>
<body>
<header>
<h1>Pergunta do Milhão</h1>
</header>
<section>
<div id="div1">
<p>O que é um sistema ERP?</p>
<p><input type="radio" name="pergunta" value="1" id="respostaUm" >
<label for="respostaUm">É um sistema de informação que integra todos os dados e processos de uma organização em um único sistema.</label></p>
<p><input type="radio" name="pergunta" value="2" id="respostaDois">
<label for="respostaDois">É uma instituição internacional sem fins lucrativos que associa profissionais de gestão de projetos.</label></p>
<p><input type="radio" name="pergunta" value="3" id="respostaTres">
<label for="respostaTres"> é um conjunto de práticas na gestão de projetos organizado pelo instituto PMI e é considerado a base do conhecimento sobre gestão de projetos por profissionais da área.</label></p>
<p><input type="radio" name="pergunta" value="4" id="nenhuma" checked >
<label for="nenhuma">NDA</label></p>
<input type="button" value="Verificar" onclick="verificar()">
</div>
<div id="res">
Testando...
</div>
</section>
<footer>
<p>&copy; Alexsander Fontes</p>
</footer>
<script src="ecma.js"></script>
</body>
</html>
 
 
 
function verificar ()
{
const respostaCorreta = 2
 
console.log ( 'verificando resposta...' )
 
let radiosElements = document.querySelectorAll ( 'input[type=radio]' )
 
// console.log ( radiosElements )
 
radiosElements.forEach ( radio => {
 
if ( radio.checked )
{
// console.log ( 'A resposta marcada foi essa:', radio.value )
 
if ( radio.value == respostaCorreta )
{
alert ( 'Parabens, reposta correta.' )
}
else
{
alert ( 'Errou trouxa.' )
}
}
 
} )
}

 

Obrigado Amigo! sua maneira de fazer essa questão está funcionando perfeitamente, valeu por essa luz. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By DinhoPHP
      Olá!
      Alguém pode me dar uma luz sobre fazer um ORDER BY, hora ASC ou hora DESC? Por favor! Estou utilizando PHP e JS no projeto.
       
      $pegadados = $pdo->prepare("SELECT * FROM produtos WHERE categoria LIKE '%$dataSearch%' OR marca LIKE '%$dataSearch%' OR produto LIKE '%$dataSearch%' OR modelo LIKE '%$dataSearch%' OR descricao LIKE '%$dataSearch%' ORDER BY $filter $filter2");
    • By DinhoPHP
      Olá!
      Alguém pode me dar uma luz sobre fazer um ORDER BY, hora ASC ou hora DESC? Por favor! Estou utilizando PHP e JS no projeto.
       
      $pegadados = $pdo->prepare("SELECT * FROM produtos WHERE categoria LIKE '%$dataSearch%' OR marca LIKE '%$dataSearch%' OR produto LIKE '%$dataSearch%' OR modelo LIKE '%$dataSearch%' OR descricao LIKE '%$dataSearch%' ORDER BY $filter $filter2");
    • By manoaj
      Boa tarde pessoal!
      Criei um sistema simples pra web utilizando PHP no backand.
      Mas agora antes do lançamento do sistema surgiu a necessidade de um app de consulta a esse sistema com funções básicas da plataforma Web, ou seja nem todas as funcionalidades serão implementadas no app agora no início.
      Qual a minha melhor alternativa no desenvolvimento híbrido hj em questão de agilidade no desenvolvimento considerando que minha plataforma web e o banco de dados mysql já estão prontos???
    • By DinhoPHP
      Olá!
      Não consigo entender o porque a minha função cadValor() funciona e a desc() não
       
      file.js
      <script> var txtval = document.querySelector('#inputValor'); var res = document.querySelector('#inputCopyValor'); //ONDE QUERO ESCREVER var res2 = document.querySelector('#seuValor'); // VALOR INDO PARA HOLERITE var res3 = document.querySelector('#seuValorMult'); // VALOR QUE SERÁ DOBRADO function cadValor(){ var val = Number(txtval.value); res.placeholder = val.toFixed(2); res2.placeholder = val.toFixed(2); var dobro = val * 2; // dobra o valor res3.placeholder = dobro.toFixed(2); // pega o valor dobrado } function desc(){ var txtDobro = document.querySelector('#seuValorMult'); // VALOR QUE FOI DOBRADO var txtSacado = document.querySelector('#seuValorDia2'); var txtRestante = document.querySelector('#seuValorRes'); var resDobro = Number(txtDobro.value); var resSacado = Number(txtSacado.value); //var resRestante = Number(txtRestante.value); var resRest = resDobro; txtRestante.placeholder = resRest.toFixed(2); } </script> file.php
      <div class="container"> <!-- PRIMEIRA LINHA --> <div class="d-flex justify-content-center mt-3"> <div id="divHolerite" class="col-12 col-sm-8 col-md-6 col-lg-4"> <div class="d-flex flex-column justify-content-center align-items-end bg-dark"> <div class="col-12 mb-3"> <label for="inputValor">Admin: Cadastrar Valor</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValor" class="form-control" type="text" name="inputValor" onkeypress="return onlynumber();"> <button type="submit" value="ativa" class="btn btn-danger text-uppercase ml-3" data-toggle="modal" data-target="#modalHolerite" onclick="cadValor()">ativa</button> </div> </div> <div class="col-12"> <button type="reset" value="clean" class="btn btn-light btn-lg text-uppercase mb-3">apagar cadastro</button> </div> <hr style="background-color: #777777; widht: 100%;"> </div> <!-- SEGUNDA LINHA --> <div class="d-flex flex-column flex-nowrap align-items-start bg-dark mb-3"> <div class="col-8 mb-3"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputCopyValor" class="form-control" type="text" name="inputCopyValor" placeholder="" readonly> </div> </div> <div class="col-12 mb-3"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValorDia" class="form-control" type="text" name="inputValorDia" placeholder="0,10" readonly> <div class="input-group-prepend"> <span class="input-group-text">por dia</span> </div> <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm ml-3">sacar</button> </div> <div class="d-flex"> <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm mr-3">descontar</button> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValorDesc" class="form-control" type="text" name="inputValorDesc"> </div> </div> </div> </div> </div> </div> <!-- HOLERITE --> <!-- Modal --> <div class="modal fade" id="modalHolerite" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <!-- HOLERITE --> <div class="container"> <!-- PRIMEIRA LINHA --> <div id="test" class="d-flex justify-content-center mt-3"> <div id="divHolerite" class="col-12 col-md-10 col-lg-8"> <div class="d-flex flex-column justify-content-center align-items-end bg-dark"> <div class="col-12 mb-3"> <h2 class="text-uppercase text-center text-white">holerite</h2> <div class="row"> <div class="col-12 col-sm-6"> <label for="seuValor" class="text-left text-uppercase">seu valor</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValor" class="form-control" type="number" name="seuValor" placeholder=""> </div> </div> <div class="col-12 col-sm-6"> <label for="inputValorDia" class="text-left text-uppercase">total: 200 dias</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValorDia" class="form-control" type="number" name="inputValorDia"> <div class="input-group-prepend"> <span class="input-group-text">por dia</span> </div> </div> </div> <div class="col-12 col-sm-6"> <label for="seuValorMult" class="text-left text-uppercase">valor multiplicado</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorMult" class="form-control" type="number" name="seuValorMult"> </div> </div> </div> </div> <hr style="background-color: #777777; widht: 100%;"> </div> <!-- SEGUNDA LINHA --> <div class="d-flex flex-column justify-content-center bg-dark mb-3" style="padding-left: 10px; padding-right: 0px;"> <div class="row overflow-visible"> <div class="col-12 col-sm-4"> <span class="text-white font-data">00/00/2019:</span> </div> <div class="col-12 col-sm-8"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorDia2" class="form-control" type="number" name="seuValorDia2" placeholder="0,10" readonly> <div class="input-group-prepend"> <span class="input-group-text">por dia</span> </div> <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm ml-3 mr-2" onclick="desc()">sacar</button> </div> </div> </div> <div class="form-row col-12" style="border: 2px white solid;"> <div class="col-12 col-sm-6"> <label for="seuValorSacado" class="text-left text-uppercase"><br></label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorSacado" class="form-control" type="number" name="seuValorSacado"> </div> <label for="seuValorSacado" class="text-center text-uppercase">valor sacado</label> </div> <div class="col-12 col-sm-6"> <label for="seuValorRes" class="text-center text-uppercase" style="margin-left: 5vw;">seu valor restante</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorRes" class="form-control" type="number" name="seuValorRes" placeholder="" readonly> </div> <label for="seuValorRes" class="text-center text-uppercase" style="margin-left: 10vw;">pra saque</label> </div> </div> </div> <!-- Termina linha geral --> </div> <!-- FIM DO HOLERITE --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>  
    • By Impermeabilidade
      Alguem conseguiria me mandar um tutorial que me ajudasse na geração de relatorios em pdf?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.