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 Cesar Melo
      Olá. Gostaria de uma opinião sobre onde focar meus estudos para trabalhar com PHP.
      Atualmente tenho conhecimentos com a linguagem PHP, e os seguintes frameworks: Bootstrap e Jquery.
      Recentemente fiz um curso de Laravel+materialize e gostei muito desse framework. Meu primeiro contato com framework para backend e pretendo utilizar o Laravel daqui pra frente nos meus estudos.
       
      Minha questão é a seguinte, quero dar continuidade aos meus estudos para me qualificar para o mercado de trabalho, mas não sei exatamente os próximos cursos que vou estudar.
      Não sei se atualmente há uma combinação de frameworks mais utilizada ou requisitada no mercado de trabalho. Ex: Laravel+vue+bootstrap, ou laravel+angularjs+materialize, tipo isso.
       
      Dei uma pesquisada no google e youtube, e notei que não há muito conteúdo de cursos por exemplo de Laravel+angularjs.
      Procurando algumas vagas de emprego, notei que há grande procurar para profissionais com qualificação em Laravel, e tambem grande procura para profissionais com qualificação em AngularJs, porém vagas distintas. Acho que não vi nenhuma vaga que peça Laravel+AngularJs.
       
      Alguém aí pode me passar uma visão ou dar sua opinião sobre isso, para eu focar meus estudos? Alguém sabe o que andam usando bastante? Ou que seja indicado de trabalhar em conjunto com PHP?
       
      Ah, uma observação... atualmente meu foco são de projetos voltados para sistemas, admin, etc. Não tenho muito perfil para projetos de marketing ou que exijam um frontend "lindo". rsrs.
       
      Grato...
    • By mpcarvalho
      Possuo pouco conhecimento em JS, então gostaria de solicitar uma ajuda com um script que montei para resgatar imagens de produtos de um determinado site/ecommerce utilizando o EAN do produto.
       
      No código abaixo eu passo via form alguns parametros como a URL do site onde quero pesquisar a imagem com "/" e na sequência o campo EAN com todos os códigos de barra que quero pesquisar separados por "," e por ultimo a extensão do arquivo de acordo com a extensão que o site em questão utiliza, jpg ou png. No final tudo será exibido na div dl_imgs e ai então eu posso dar um ctrl + s no meu navegador e salvar todas as imagens de uma vez. 
       
      O objetivo do FOR é retornar imagem por imagem utilizando os parametros URL + EAN + EXT. Ex: "ecommerce.com.br/imagens/000030201.png".
       
      O que acontece é que preencho o campo EAN com todos os códigos de barras que preciso separados por virgula, mas o script não consegue montar o array e me retorna algo parecido com isso: https://cdn-*******.*******.com.br/products/7896003703863,7897005100223,7897005101589,7896360210097,7896003703863,7897005100223,7897005101589
       
      Como podem ver me trás apenas uma imagem que não existe pois não separou os códigos de barra na matriz. Porem se eu copiar esses mesmos códigos e colocar direto na VAR MATRIZ, o script funciona. 
       
      Segue abaixo o script utilizado. Desde já agradeço!
       
      <script>
              function loadImgs(){
                /*--- Dados do formulário ---*/
                var dataform = document.forms[0] || document.forms['dados'];
                //var t = dataform.imgtotal.value;
                var url = dataform.url.value;
                var ext = dataform.ext.value;
                var ean = dataform.ean.value;
                dataform.buscar.disabled = true;
                  
                /*--- Gerar IMGS ---*/
                var div = document.getElementById('dl_imgs') || document.dl_imgs;
                div.innerHTML = "";

                novoArray = ean.split(',');
                var matriz = [novoArray];
                  
               for(var i=0; i<matriz.length; i++) {
                     div.innerHTML += '<img src="'+url+""+matriz+''+ext+'" />';
               }
      }
      </script>
       
      PS: Para melhorar ainda mais essa extração, eu gostaria de fazer isso fazendo um UPLOAD de um arquivo XLS contendo 2 colunas EAN e Nome produto, e no final exibir a imagem e abaixo o nome do produto, se alguém puder me dar uma luz de como fazer isso agradeço. Att;
    • By TheRonaldoStar
      Oii, fala ae pessoal!!
      Alguém pode me ajudar com uma coisa por favor?;
      Seguinte!, eu anteriormente fiz uma pergunta aqui no fórum recorrente a isso, mas eu conseguir uma solução parcial.
      Que era, fazer uma listagem de todos os cadastros e fazer a junção dos cadastros com uma coluna igual, Ou seja existem duas colunas [DE e Para], que recebem o id de quem está recebendo ou que está enviando a mensagem, eu conseguir fazer a tal listagem por grupo mas o problema que estou tendo é: que so faz o agrupamento de as colunas contiver o id por ex: [De = "1" e Para ="2"].
      Atualmente estou usando a codificação deste Jeito:
       
      $sql_2 = $db -> prepare("SELECT * FROM privado WHERE (Para = '$Meu_id') Or (De = '$Meu_id') GROUP BY Para, De DESC"); $sql_2 -> execute(); Esta consulta como pode ver ele busca todos os cadastros que tenha o meu ID ou seja do usuário online!, Após a consulta ele vei obter em um "while" somente o [ Id_De eo Id_Para ] desta forma:
      while($dados_2 = $sql_2 -> fetch(PDO::FETCH_OBJ)){ $Id_De = ($dados_2 -> De); $Id_Para = ($dados_2 -> Para); } Mas em fim eu gostaria de saber como mostrar somente um resultado ou seja o ultimo resultado que tiver o meu ID em ambas colunas [ Id_De ou Id_Para ].
      Antes de vocês me recomendar a função DESC LIMIT 'valor' saiba eu quero que liste todos os usuários que enviou ou recebeu minha mensagem não somente 1 ou seja se eu mandar um mensagem para o usuário 2 e ele me retornar uma mensagem vai mostrar somente o ultimo registro que tenha o meu ID e o id dele.
       
      Atenciosamente,
      ~Ronaldo
       
    • By manoaj
      Boa noite pessoal!
      Alguém ai entente dos checkouts do Mercado Pago pra me explicar como eu obtenho os dados da preferência criada através da url disponível na API
      https://api.mercadopago.com/checkout/preferences/:id?access_token=ACCESS_TOKEN_ENV  
    • By Richard.Ribeiro
      Boa tarde a todos, Uma ajuda Por favor, alguém pode me explicar porque sempre que eu digito no" input name=vsat" e clico em buscar a DIV do " select id=rightValues" SOME
      alguem poderia ajudar? o erro está no  PHP ou JS
      desde já agradeço a atenção.
      <style media="screen">
      SELECT, INPUT[type="text"] {
        width:500px;
        box-sizing: border-box;
      }
      SELECT, INPUT[type="button"] {
        font-size: 20px;
      }
      SECTION {
        padding: 8px;
        background-color: #f0f0f0;
        overflow: auto;
      }
      SECTION > DIV {
        float: left;
        padding: 30px;
      }
      SECTION > DIV + DIV {
        width: 200px;
        text-align: center;
      }
      </style>
      <section class="container">
      <form  method="post">
        <?php
        if (isset($_POST['buscar'])) {
            $id_gmm = $_POST['gmm'];
          }elseif (isset($_POST['buscar2'])){
                $vsat = $_POST['vsat'];
            }
            ?>
      <h2><i class="fa fa-link"></i> Vincular Componentes a VSAT</h2>
      <h4><i class="fa fa-arrow-down"></i> Itens da GMM</h4>
          <div>
            <input type="text" name="gmm"  placeholder="Digite o N° da GMM">
            <input type="submit" name="buscar" value="buscar"><br>
              <select id="leftValues" size="5" multiple>
                <?php
                $consultaGmm = ConexaoBD::conectar()->prepare("SELECT tipo_material_id FROM itens_fornecidos WHERE gmm_id = $id_gmm ");
                $consultaGmm->execute();
                $consultaGmm = $consultaGmm->fetchAll();
                foreach ($consultaGmm as $key => $value) {
               ?>
              <option value="<?php echo  $value['tipo_material_id'];?>">
               <?php echo $value['tipo_material_id']; ?>
               </option>
            <?php }?>
            </select>
          </div>
          <div>
              <input type="button" id="btnLeft" value="&lt;&lt;" />
              <br>  <br>
              <input type="button" id="btnRight" value="&gt;&gt;" />
          </div>
          <div>
            <label for="">VSAT</label>
            <input type="text" name="vsat"  placeholder="Digite o ID/IDE da VSAT">
            <input type="submit" name="buscar2" value="buscar"><br>
              <select id="rightValues" size="4" multiple>
                <?php
                $consultaVsat = ConexaoBD::conectar()->prepare("SELECT estoque_material_id FROM componentes_instalados WHERE estoque_material_id = $vsat ");
                $consultaVsat->execute();
                $consultaVsat = $consultaVsat->fetchAll();
                foreach ($consultaVsat as $key => $valueVsat) {
               ?>
               <option value="<?php echo $valueVsat['estoque_material_id'];?>">
                 <?php echo $valueVsat['estoque_material_id']; ?>
               </option>
             <?php } ?>
              </select>
          </div>
      </form>
      </section>
      <script  src="<?php echo INCLUDE_PATH_PAINEL ?>js/jquery-3.4.1.min.js"></script>
      <script src="<?php echo INCLUDE_PATH_PAINEL ?>js/main.js"></script>
      <script type="text/javascript">
      $("#btnLeft").click(function () {
          var selectedItem = $("#rightValues option:selected");
          $("#leftValues").append(selectedItem);
      });
      $("#btnRight").click(function () {
          var selectedItem = $("#leftValues option:selected");
          $("#rightValues").append(selectedItem);
      });
       
      </script>
      <?php die(); ?>
       
       
×

Important Information

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