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 alexdcarvalho
      Olá, eu tô tentando concluir um exercício no qual eu tenho que fazer um calculo de multiplicação entre dois números e por pro resultado aparecer num alert. Em seguinda, caso a pessoa queira fazer novamente o calculo, clicar num botão chamado Área, porém tá dando erro e eu não tô conseguindo identificar:
       
                  var n1 = parseInt(prompt('Digite um número:'));             var n2 = parseInt(prompt('Digite outro número:'));               escrever(result, n1, n2);               function escrever(result, l, a) {                 var mensagem = 'O resultado é ' + (l*a);                 parseInt(mensagem);                   alert(mensagem);             }               function calcularArea(la, al) {                 var largura = parseInt(prompt('Digite novamente um número:'));                 var altura = parseInt(prompt('Agora outro número:'));                   var mens = 'O resultado é ' + (la*al);                 parseInt(mens);                   escrever(mens, la, al);               } 
    • By mamotinho
      Olá, estou com um erro persistente já revirei todo o código para encontrar o erro e não tive nenhum sucesso, acho que pode ser por que não tenho tanto conhecimento em javascript e não estou conseguindo enxerga o erro.
       
      Segue abaixo o código da página,
      OBS: A Web está com programação antiga, pretendo atualizar o mesmo assim que eu concluir todo o código fonte.
       
      Estou executando esse shop dentro de um game , o navegador que a programação do game puxa é IE.
       
      <?php require("_config/init.php"); $action = anti_injection(AntSQL(aiRemove(protecao($_GET["action"])))); $cat = anti_injection(AntSQL(aiRemove(protecao($_GET["cat"])))); $v1 = anti_injection(AntSQL(aiRemove(protecao($_GET["v1"])))); $v2 = anti_injection(AntSQL(aiRemove(protecao($_GET["v2"])))); $v3 = anti_injection(AntSQL(aiRemove(protecao($_GET["v3"])))); $Item = anti_injection(AntSQL(aiRemove(protecao($_GET["product"])))); $nickname = array('1','2','6'); if(!$v1){ echo "<h1>404 - Página não encontradAAa!</h1>"; exit(); }elseif(!in_array($v1, $nickname)){ echo "<h1>404 - Página não encontradas!</h1>"; exit(); } $search = mssql_query("SELECT * FROM ".DB_ACC.".dbo.cabal_auth_table WHERE UserNum='".$v1."' AND AuthKey='".$v2."'"); $rows = mssql_fetch_object($search); $money = mssql_query("SELECT * FROM ".DB_CSH.".dbo.CashAccount WHERE UserNum='".$rows->UserNum."'"); $rowCash= mssql_fetch_object($money); ?> <!doctype html> <html> <head> <meta charset="utf-8"> <title><?=WEB_NAME_MONEY?> Shop</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <meta http-equiv="X-UA-Compatible" content="IE=9"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script> <script src="template/js/script.js"></script> <link href="template/css/cashshop.css" rel="stylesheet" type="text/css"> </head> <script src="/template/js/cabaldark.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#ajax_form').submit(function(){ var dados = jQuery( this ).serialize(); jQuery.ajax({ type: "POST", url: "_buy.php", data: dados, success: function(data) { alert(data); } }); return false; }); }); </script> <body> <div class="cashshop"> <a href="http://cabalclose"> <div class="close"></div> </a> <div class="info"> <div class="cashs"> <div class="cash"><?=WEB_NAME_MONEY?></div> <div class="valor"><?=$rowCash->Cash?></div> </div> <div class="ids"> <div class="id">ID</div> <div class="user"><?=$rows->ID?></div> </div> </div> <a href="t-point/tpIndex.php?v1=<?=$v1?>&v2=<?=$v2?>&v3=<?=$v3?>"> <div class="tpoint"></div> </a> <div class="menu"> <?php if($action=="plus"){ ?> <a href="CashIndex.php?v1=<?=$v1?>&v2=<?=$v2?>&v3=<?=$v3?>"><div class="item"></div></a> <a href="CashIndex.php?v1=<?=$v1?>&v2=<?=$v2?>&v3=<?=$v3?>&action=plus"><div class="plus_active"></div></a> <?php }else{ ?> <a href="CashIndex.php?v1=<?=$v1?>&v2=<?=$v2?>&v3=<?=$v3?>"><div class="item_active"></div></a> <a href="CashIndex.php?v1=<?=$v1?>&v2=<?=$v2?>&v3=<?=$v3?>&action=plus"><div class="plus"></div></a> <?php } ?> </div> <div class="categoria"> Bem-vindo(a), Loja do Cabal Dark. </div> <div class="mensagem" id="box"> <div class="box"> <div>"Kit Nome do item", <br> <strong>Você deseja comprar este item?</strong> </div> <div> <div class="comprar"></div> <div class="cancelar" onClick="mensagemClose()"></div> </div> </div> </div> <?php if($action=="plus"){ ?> <div class="categorias"> <div class="opcao"> <img src="template/img/circle/historico.png" width="18" height="18" alt=""/> <span>Histórico</span> </div> </div> <?php }else{ ?> <div class="categorias"> <?php $search = mssql_query("SELECT * FROM ".DB_WEB.".dbo.Shop_Categorias WHERE SubCategoria='nao'"); while($rows=mssql_fetch_object($search)){ $searchSub = mssql_query("SELECT * FROM ".DB_WEB.".dbo.Shop_Categorias WHERE SubCategoria='sim' AND IdxSub='".$rows->Idx."'"); $countSub = mssql_num_rows($searchSub); if($countSub>=1){ ?> <div class="submenu" name="submenu" id="sub<?=$rows->Name?>"> <?php $num=0; while($rowsSub=mssql_fetch_object($searchSub)){ $num+=1; ?> <div class="opcaoSub <?php if($num>=2){ echo "mgOito"; };?>"><a href="CashIndex.php?v1=<?=$v1?>&v2=<?=$v2?>&v3=<?=$v3?>&cat=<?=$rowsSub->Idx?>"><?=htmlentities($rowsSub->Name, ENT_COMPAT, 'ISO-8859-1')?></a></div> <?php } ?> </div> <?php } } //AQUI ADAPTAÇÃO MAMOTINHO // $search = mssql_query("SELECT * FROM ".DB_WEB.".dbo.Shop_Categorias WHERE SubCategoria='nao' And IdxSub >= 1"); $contarNorm = mssql_num_rows($search); $search02 = mssql_query("SELECT * FROM ".DB_WEB.".dbo.Shop_Categorias WHERE SubCategoria='nao' And IdxSub < 1"); $semSubmenu = mssql_num_rows($search02); if($contarNorm >= 1){ while($rows=mssql_fetch_object($search)){ ?> <div class="opcao" onClick="abrirSub('sub<?=$rows->Name?>')"> <img src="template/img/circle/<?=$rows->Icon?>" width="18" height="18" alt=""/> <span><?=$rows->Name?></span> </div> <?php if($rows->Bar=="sim"){ ?> <img src="template/img/circle/bar.png" alt=""/> <?php } ?> <?php } }if($semSubmenu>=1){ while($rows=mssql_fetch_object($search02)){ ?> <div class="opcao" style="margin-bottom:10px;" onClick="envURL('CashIndex.php?v1=<?=$v1?>&v2=<?=$v2?>&v3=<?=$v3?>&cat=<?=$rows->Idx?>');"> <img src="template/img/circle/<?=$rows->Icon?>" width="18" height="18" alt=""/> <span><?=$rows->Name?></span> </div> <?php if($rows->Bar=="sim"){ ?> <img src="template/img/circle/bar.png" alt=""/> <?php } ?> <?php } } ?> </div> <?php } ?> <div class="conteudo"> <?php if($cat){ $searchItens = mssql_query("SELECT * FROM ".DB_WEB.".dbo.Shop_Itens WHERE Categoria='".$cat."' AND Estoque >= 1"); $countItens = mssql_num_rows($searchItens); if($countItens>=1){ while($rows=mssql_fetch_object($searchItens)){ ?> <div class="item" onClick="envURL('CashIndex.php?v1=<?=$v1?>&v2=<?=$v2?>&v3=<?=$v3?>&product=<?=$rows->Idx?>&action=product');"> <div class="preco"><?=number_format($rows->Preco - $rows->Desconto)?></div> <div class="img"> <img src="template/img/produtos/<?=$rows->Img?>" width="90" height="90" /> </div> <span style="font-size:12px; font-size:arial;"> <? if(strlen($rows->Name)>=18){ echo "<marquee>$rows->Name</marquee>"; }else{ echo $rows->Name; } ?> </span> </div> <?php } }else{ echo '<span style="color: #fff; padding-top: 30px;">No momento não há itens a exibir.</span>'; } }else{ if($action=="historico"){ echo "tes"; }elseif($action=="product"){ $ItemIdx = $_GET['product']; $rows = mssql_fetch_object(mssql_query("SELECT * FROM CabalCash.dbo.Shop_Itens where Idx='".$ItemIdx."'")); if($rows->Limite<=1){ $input = "disabled"; }else{ $input = ""; } ?> <div class="detalhes"> <form method="post" action="" id="ajax_form"> <div class="meio"> <div class="titulo"><?=$rows->Name?></div> <input name="Idx" id="txtNome" type="hidden" value="<?=$rows->Idx?>"> <input name="UserNum" id="txtNome" type="hidden" value="<?=$v1?>"> <div class="img"> <img src="template/img/produtos/<?=$rows->Img?>" width="130" height="100" alt=""/> </div> <div class="caixa"> <div class="valor"> <div>Preço</div> <div><?=number_format($rows->Preco)?> <?=WEB_NAME_MONEY?></div> </div> <div class="quantidade"> <div>Quantidade</div> <div>x<input type="text" value="1" <?=$input?> id="Quantidade" name="Quantidade" value="1" min="1" max="20"> </div> </div> <div class="current"> <div>Atual</div> <div><?=$rowCash->Cash?> <?=WEB_NAME_MONEY?></div> </div> <div class="preco"> <div>Preco</div> <div><?=number_format($rows->Preco)?> <?=WEB_NAME_MONEY?></div> </div> <div class="desconto"> <div>Desconto</div> <div><?=number_format($rows->Desconto)?> <?=WEB_NAME_MONEY?></div> </div> <div class="precofinal"> <div>Preço Final</div> <div><output id="total" name="total"><?=number_format($rows->Preco - $rows->Desconto)?></output> <?=WEB_NAME_MONEY?></div> </div> <div class="sobra"> <div>Restante</div> <div><?=number_format($rowCash->Cash - ($rows->Preco - $rows->Desconto))?> <?=WEB_NAME_MONEY?></div> </div> </div> <div class="content"> <div>Duração</div> <div><?=tempoItem($rows->Duracao)?></div> <div>Efeito</div> <div><?=htmlentities($rows->Efeito, ENT_COMPAT, 'ISO-8859-1')?></div> <div>Requesitos</div> <div> Nível: <?=$rows->NivelUser?> ou mais<br> Limite de compra: <?=$rows->Limite?><br> Estoque: <?=$rows->Estoque?><br><br> <span style="color: #FFFF00;"><strong>Descrição</strong></span> <div><?=$rows->Descricao?></div> </div> </div> <div class="botoes"> <label><input class="comprar" style="width:122px;border:0px; background-color:#FFFFFF;height:30px; flex:0 1 25%; padding-bottom:30px;" type="submit" name="enviar" value="Comprar" /></label> </div> </div></form> </div> <? }else{ $searchItens = mssql_query("SELECT * FROM ".DB_WEB.".dbo.Shop_Itens WHERE Destaque='sim' AND Estoque >= 1"); $countItens = mssql_num_rows($searchItens); if($countItens>=1){ while($rows=mssql_fetch_object($searchItens)){ ?> <div class="item" onClick="envURL('CashIndex.php?v1=<?=$v1?>&v2=<?=$v2?>&v3=<?=$v3?>&product=<?=$rows->Idx?>&action=product');"> <div class="preco"><?=number_format($rows->Preco - $rows->Desconto)?></div> <div class="img"> <img src="template/img/produtos/<?=$rows->Img?>" width="90" height="90" /> </div> <span style="font-size:12px; font-size:arial; "> <? if(strlen($rows->Name)>=18){ echo "<marquee>$rows->Name</marquee>"; }else{ echo $rows->Name; } ?> </span> </div> <?php } }else{ echo '<span style="color: #fff; padding-top: 30px;">No momento não há itens a exibir.</span>'; } } } ?> </div> </div> </body> </html>  

    • By joaovitor102
      <?php require_once '../App/auth.php'; require_once '../layout/script.php'; require_once '../App/Models/vendas.class.php'; require_once '../App/Models/cliente.class.php'; require_once '../App/Models/connect.php'; require '../layout/alert.php'; echo $head; echo $header; echo $aside; echo '<div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> Todos os produtos </h1> <ol class="breadcrumb"> <li><a href="../"><i class="fa fa-dashboard"></i> inicio</a></li> <li class="active">Itens</li> </ol> </section> <!-- Main content --> <section class="content"> '; echo " <form action='../App/Database/Vervendas.php' method='post'> <div class='form-group has-feedback'> <input type='number' name='Dia' style='width:50px;' id='dia' placeholder='dia'><b>/</b> <input type='number' name='Mes' style='width:50px;' id='mes' placeholder='mes'><b>/</b> <input type='number' name='Ano' style='width:100px; id='ano''placeholder='ano'> <button type='submit'>Envia</button> </div> </form> "; echo '</div>'; echo '</section>'; echo '</div>'; echo $footer; echo $javascript; ?> public function ListaVendas($dia,$mes,$ano){ $item="SELECT * FROM `itens`,`Vendas`,`produtos` WHERE `iditem`=`idItens` and `Produto_CodRefProduto`=`CodRefProduto` and `datareg`='$ano'-'$mes'-'$dia'"; return $item; } <?php require_once '../../App/auth.php'; require_once '../../App/Models/vendas.class.php'; if(isset($_POST['dia']) && isset($_POST['mes']) && isset($_POST['ano'])) { $dia=$_POST['dia']; $mes=$_POST['mes']; $ano=$_POST['ano']; $vendas=new Vendas; $dados=$vendas->ListaVendas($dia,$mes,$ano); $limite=mysql_query("$dados"); while ($dados =mysql_fetch_array($limite) ) { $valor=$dados['valor']; $data=$dados['datareg']; $produto=$dados['NomeProduto']; echo "<div > <td>valor:' . $valor . '</td> <td>dia:' . $data. '</td> <td>nome produto:' . $produto . '</td>'; </div>"; $valores+=$valores; } echo "<div> <td>'.$valores.'</td> </div>"; } else{exit;} ?> esta dando erro no programa
    • By mamotinho
      Olá, boa noite! estou com bastante dificuldade em monta uma web com a versão do prototype e jquery.min pois eles são funções antigas e não estão compatíveis com as versões novas. gostaria de sabe se alguém conhece alguma forma nova de Utilizar onclick e ajax para abrir a página dentro da index sobre uma div ?
    • By alexndrre
      Olá, pessoal! Minha dúvida é basicamente o seguinte. Tenho um formulário, onde as pessoas colocam seu nome, telefone, cidade, opção de produto (imóvel/automóvel). Ao clicar em enviar, eu preciso que apareça uma pop-up ou em uma outra página, um tela de agradecimento e uma tabela. Porém, é uma tabela para imóvel e outra para automóveis, daí preciso programar para que ela aparece de acordo com a escolha do produto.
      Como posso fazer isso?
×

Important Information

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