Jump to content
dieef5

Problema ao exibir Div ao clicar em radio button e outra div

Recommended Posts

Boa noite pessoal,

 

Estou com um problema e gostaria da ajuda dos amigos:

Em uma página de escolha de forma de pagamento gostaria de fazer aparecer uma div que está oculta quando seleciono a opção pelo radio button.

Funciona ok clicando direto no radio button, porém o radio button também é selecionado ao clicar sobre o nome da opção na DIV (exemplo: Boleto Bancário). E quando clico sobre o nome da opção a DIV oculta não aparece.

 

Gostaria de exibir a DIV oculta tanto ao clicar sobre o nome Boleto bancário como ao clicar no radio button.

 

o html é mais ou menos assim:

<div class="selection row">
  <div class="col-xs-6 text-left"><strong>Boleto Bancário</strong> 10% de Desconto</div>
  <div class="col-xs-6 text-right"><input type="radio" name="payment" value="boleto" checked="checked" /></div>
</div>

<div id="campos">
  	Exibe instrução
  <div

 

Meu jquery está assim:

$("input[name=payment]").change(function(data){ 
    var selection = $("input[name=payment]:checked").val();
    console.log(selection); 
    if(selection != "boleto")
        $("#campos").hide();
    else
        $("#campos").show('fast');
});

$("#campos").hide();

 

VLw pessoal..

 

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 henriquers
      Bom Dia,
       
      Estou fazendo um sistema para armazenar documento e tenho algumas tabelas de consulta onde a mesma aparece algumas informações necessarias como ID , Nome etc
      e estou tentando Ocultar a coluna que esta o ID para que o usuario não consiga ver,estou utilizando o seguinte codigo para ocultar a coluna.
      <script> $("#tabela_cons").ready(function () { $('td:nth-child(1),th:nth-child(1)').hide(); }); </script>  
      A coluna fica oculta certinho do modo que eu quero, mas esse código esta afetando as outras tabelas que eu tenho na pagina também, e não sei como ocultar apenas na tabela que eu desejo que seja oculta no caso a tabela com ID = tabela_cons;
    • By luigiferrari
      Estou com um programa de estoque.
      A página index.php o pedido feito, e tem um botão(Fazer Recibo) ao lado que leva para a página de impressão, tipo um recibo.

       
       
      Ao clica em Fazer recibo, vou para uma página de impressão, segue abaixo a página:

       
      Gostaria de uma maneira, onde eu pudesse por exemplo, escrever o número dos pedidos, e já imprimisse todas as páginas.
      Ou qualquer outra maneira, mais pratica e rápida do que ir de uma em uma.
       
      Agradeço desde já
       
       
       
       
       
       
       
    • By João Vitor Teixeira
      Olá, galera
      Eu sou  iniciante nessa área de informatica e estou fazendo algo complicado no meu site ao meu ponto de vista.
      Estou tentando colocar uma imagem em modal que seja respectiva pelo funcionário que ele escolheu, ou seja,
      quando o usuário escolher um funcionário aparecerá um modal com uma imagem do funcionário escolhido 
      mas infelizmente não estou conseguindo, se puderem ajudar ficarei muito grato!!
      Estou usando dois arquivos principais nessa parte, o agendamento.php e o buscar.php(estou usando ajax nessa parte)
      agendamento.php:
      <?php include 'buscar.php'; ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Agendamento</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/editar.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script> function letra(campo){ var digits="qwertyuiopasdfghjklçzxcvbnmãâóáâô QWERTYUIOPASDFGHJKLÇZXCVBNM" var campo_temp for (var i =0;i<campo.value.length;i++){ campo_temp=campo.value.substring(i,i+1) if(digits.indexOf(campo_temp)==-1){ campo.value = campo.value.substring(0,i); break; } } } function numeros(campo){ var digits="0123456789()-" var campo_temp for (var j=0;j<campo.value.length;j++){ campo_temp=campo.value.substring(j,j+1); if(digits.indexOf(campo_temp)==-1){ campo.value = campo.value.substring(0,j); break; } } } function EMAIL_E_SENHA(campo){ var digits="qwertyuiopasdfghjklçzxcvbnmãâóáâô10123456789.-@ QWERTYUIOPASDFGHJKLÇZXCVBNM" var campo_temp for (var i =0;i<campo.value.length;i++){ campo_temp=campo.value.substring(i,i+1) if(digits.indexOf(campo_temp)==-1){ campo.value = campo.value.substring(0,i); break; } } } function formenviar(){ var senha = formulario_cliente.senha.value; var consenha = formulario_cliente.con_senha.value; if(document.getElementById("servico").value == ""){ window.alert("Escolha se quer exibir o e-mail."); document.getElementById("estado").focus(); return false; } if(senha != consenha){ alert('Sua senha está digitada errada digite novamente') return false; } } </script> </head> <body> <div class="userform"> <div class="uptab"> <a href="area_usuario.php"><i class="fa fa-arrow-circle-o-left left" style="font-size: 30px;"></i></a> </div> <center> <div class="tabs"> <button class="tablink " onclick="openCity(event,'dados')">AGENDAMENTO</button> <button class="tablink " onclick="openCity(event,'agenda')">‏</button> </div> </center> <div class="poscity"> <form method="post" name="form1" action="cadastro_agen.php" class="formulario"> <div id="dados" class="w3-container w3-border city dados"> <div> <div class="iconstab"> <i class="fa fa-scissors"></i> Serviço</div><br> <div class="box"> <select id="input-2" name="servico" id="servico"> <option selected value="">Escolha uma opção</option> <?php while($campo = $con->fetch_array()) { ?> <option><?php echo $campo['nome_serv'];?></option> <?php } ?> </select> </div> </div> <br> <div> <div class="iconstab"> <i class="fa fa-users"></i> Funcionário </div><br> <div class="box"> <select id="input-3" name="funcionario"> <option selected value="">Escolha uma opção</option> </select> </div> </div> <div> </div><br> </div> <div id="modalfunc" class="modalfunc"> <div class="headermodal"><span onclick="document.getElementById('modalfunc').style.display='none'" id="closemodal"><i class="fa fa-times" style="font-size:25px; padding-top: 25%; padding-left: 30%;"></i></span></div> <div class="frame"> <img src="upload/<?php echo $car20;?>"> </div> </div> <div id="agenda" class="w3-container w3-border city dados" style="display:none"> <div> <div class="iconstab"> <i class="fa fa-calendar"></i> Data </div><br> <div class="box"> <input id="myDate" type="date" name="data" min="2015-10-28" required /> </div> </div> <br> <div class="iconstab"> <i class="fa fa-clock-o"></i> Horário </div><br> <div class="box"> <select id="input-4" name="horario" required> <option disabled selected>Escolha uma opção</option>" </select> </div> <br> <input type="submit" value="AGENDAR" onclick="formenviar" style="font-size: 20px; border: none; background-color: transparent; color: #555"> </div> </form> <div class="footerdiv"> <center> <div class="links"> <button onclick="openCity(event,'dados')" class="tablink "><i class="fa fa-arrow-left"></i> Voltar</button> <button class="tablink " onclick="openCity(event,'agenda')">Próximo <i class="fa fa-arrow-right"></i></a> </div> </center> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="js/index.js"></script> <script> $("select[name=servico]").change(function(){ $("select[name=funcionario]").html("") }) $("select[name=servico]").change(function(){ let valor = $(this).val() $.get("buscar.php", {valor:valor}, function(data){ $("select[name=funcionario]").append("<option disabled selected>Escolha uma opção</option>") $("select[name=funcionario]").append(data) }) }) $("select[name=servico]").change(function(){ $("select[name=horario]").html("") }) $("select[name=servico]").change(function(){ let valor1 = $(this).val() $.get("buscar.php", {valor1:valor1}, function(data1){ $("select[name=horario]").append("<option disabled selected>Escolha uma opção</option>") $("select[name=horario]").append(data1) }) }) $("input[name=data]").change(function(){ let valor2 = $(this).val() $.get("buscar.php", {valor2:valor2}, function(data2){ }) }) $("select[name=funcionario]").change(function(){ let valor3 = $(this).val() document.getElementById('modalfunc').style.display='block'; $.get("buscar.php", {valor3:valor3}, function(data3){ }) }) $("select[name=servico]").change(function(){ let valor4 = $(this).val() $.get("buscar.php", {valor4:valor4}, function(data4){ }) }) </script> <script> function openCity(evt, cityName) { var i, x, tablink; x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks.className = tablinks.className.replace("", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += ""; } </script> <script> $("#edit-profile").submit(function(e) { var agendamento = $("#agend").val().split('T'); agendamento = new Date(agendamento[0]).setHours(24); var hoje = new Date(); if (agendamento <= hoje) { alert('Por favor, insira uma data válida!'); e.preventDefault(); } }); </script> <script> document.getElementById("myDate").min = new Date().getFullYear() + "-" + parseInt(new Date().getMonth() + 1 ) + "-" + new Date().getDate() </script> <script> // Exemplo de JavaScript inicial para desativar envios de formulário, se houver campos inválidos. (function() { 'use strict'; window.addEventListener('load', function() { // Pega todos os formulários que nós queremos aplicar estilos de validação Bootstrap personalizados. var forms = document.getElementsByClassName('needs-validation'); // Faz um loop neles e evita o envio var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script> </body> </html> buscar.php: <?php define ('HOST','127.0.0.1'); define ('usuario', 'root'); define ('senha', ''); define ('db', 'estudiobecca'); $conexao = mysqli_connect(HOST, usuario, senha, db) or die ('Não foi possivel conectar'); session_start(); $nome = $_SESSION["email"]; if(!isset($_SESSION["email"]) || !isset($_SESSION["senha"])){ header("location: login.html"); exit(); } $valor = filter_input(INPUT_GET, "valor"); $valor1 = filter_input(INPUT_GET, "valor1"); $valor2 = filter_input(INPUT_GET, "valor2"); $valor2 = date("Y-m-d", strtotime(str_replace('/', '-', $valor2))); $valor3 = filter_input(INPUT_GET, "valor3"); $query20 = mysqli_query($conexao, "SELECT foto_func FROM funcionario WHERE nome_func = '{$valor3}'"); $result20 = mysqli_fetch_array($query20); $car20 = $result20['foto_func']; $consulta = "SELECT nome_serv FROM servico "; $con = $conexao->query($consulta) or die ($conexao->error); $consulta10 = "SELECT nome_func FROM funcionario "; $con10 = $conexao->query($consulta10) or die ($conexao->error); $query = mysqli_query($conexao, "select id_serv from servico where nome_serv = '{$valor}'"); $result = mysqli_fetch_array($query); $car = $result['id_serv']; $query1 = mysqli_query($conexao, "select id_func from funcionario_servico where id_serv ='{$car}'"); while ($id = mysqli_fetch_array($query1)) { $id_func = $id["id_func"]; $consulta2 = "SELECT nome_func FROM funcionario where id_func = '{$id_func}'"; $con2 = $conexao->query($consulta2) or die ($conexao->error); foreach ($con2 as $lista) { echo "<option>".$lista["nome_func"]."</option>"; } } $query3 = mysqli_query($conexao, "select id_serv from servico where nome_serv = '{$valor1}'"); $result3 = mysqli_fetch_array($query3); $car3 = $result3['id_serv']; $query12 = mysqli_query($conexao, "select id_func from funcionario where nome_func = '{$valor3}'"); $result12 = mysqli_fetch_array($query12); $car12 = $result12['id_func']; $query10 = mysqli_query($conexao, "select id_hor from agendamento where data = '{$valor2}' and id_func = '{$car12}' and id_serv = '{$car}'"); $result10 = mysqli_fetch_array($query10); $car10 = $result10['id_hor']; $query11 = mysqli_query($conexao, "select hora from horario where id_hor = '{$car10}'"); $result11 = mysqli_fetch_array($query11); $car11 = $result11['hora']; $query2 = mysqli_query($conexao, "select id_hor from servico_horario where id_serv ='{$car3}'"); while($id2 = mysqli_fetch_array($query2)){ $id_hor = $id2["id_hor"]; $consulta1 = "SELECT hora FROM horario where id_hor = '{$id_hor}' and hora != '{$car11}'"; $con1 = $conexao->query($consulta1) or die ($conexao->error); foreach ($con1 as $lista1) { echo "<option>".$lista1["hora"]."</option>"; } } ?>                        
          
          
       
      Como posso resolveu esse problema, como podem ver eu tentei colocar uma variável php para mostrar a imagem, mas não vai 
       
    • By ChuChun
      Estou começando a mexer com progromação, estive fazendo um algoritmo de física, mas, quando pedi para que fossem coletados os campos para fazer assim a equação, não da certo, este é o código da parte que estou com dificuldade:

       
      $("#btn1").click(function(){ var comprimento = parseFloat($("#comprimento").val()); var espiras = parseFloat($("#espiras").val()); var no = parseFloat($("#no").val()); var multpi = parseFloat($("#multpi").val()); var pi = parseFloat($("#pi").val()); var amperes = parseFloat($("#amperes").val()); var valor = parseFloat($("#valor").val()); var resultado = (var multpi = parseFloat($("#multpi").val() * var pi = parseFloat($("#pi").val()) * parseFloat($("#no").val()) * (parseFloat($("#espiras").val()) * parseFloat($("#comprimento").val()) )* parseFloat($("#amperes").val());  
    • By lucas70770
      Olá, eu tenho um sistema de pedidos onde em sua tabela a linha impar é os dados do produto e a impar é a grade de produtos, segue o código:
      <table class="tabela-tab-produto"> <thead> <tr> <th width="43"></th> <th>Código</th> <th>Descrição</th> <th>Qtde.</th> <th>Preço Tab.</th> <th>Desc.</th> <th>Preço Líq.</th> <th>Subtotal</th> <th></th> </tr> </thead> <tbody> <tr id="5{1+2,2{4+1"> <td></td> <td>LS</td> <td>Cortinas Listradas</td> <td class="text-right padding-right-15">3 <small>Un</small></td> <td class="text-right"><small>R$</small> 119.9</td> <td class="text-center"></td> <td class="text-right"><small>R$</small> 150</td> <td class="text-right"><small>R$</small> 450</td> <td class="text-right"> <a class="button tiny btn-cinza btn_editar" id="1"><span class="icon icon-pencil"></span></a> <a class="button tiny btn-cinza btn_excluir margin-right-15" data-open="container_excluir" id="86" aria-controls="container_excluir" aria-haspopup="true" tabindex="0"><span class="icon icon-bin"></span></a> </td> </tr> <tr> <td colspan="9"> <div class="medium-12 columns"> <table class="tab-produto"> <thead> <tr> <th></th><th>380x230</th><th>580x230</th> </tr> </thead> <tbody> <tr><td>Azul Claro</td><td>1</td><td>-</td></tr><tr><td>Azul</td><td>-</td><td>2</td></tr> </tbody> </table> </div> </td> </tr><tr id="1{1+1"> <td></td> <td>VLI</td> <td>Cortinas Voil Liso</td> <td class="text-right padding-right-15">1 <small>Un</small></td> <td class="text-right"><small>R$</small> 79.9</td> <td class="text-center"></td> <td class="text-right"><small>R$</small> 79.9</td> <td class="text-right"><small>R$</small> 79.9</td> <td class="text-right"> <a class="button tiny btn-cinza btn_editar" id="3"><span class="icon icon-pencil"></span></a> <a class="button tiny btn-cinza btn_excluir margin-right-15" data-open="container_excluir" id="94" aria-controls="container_excluir" aria-haspopup="true" tabindex="0"><span class="icon icon-bin"></span></a> </td> </tr> <tr> <td colspan="9"> <div class="medium-12 columns"> <table class="tab-produto"> <thead> <tr> <th></th><th>280x230</th> </tr> </thead> <tbody> <tr><td>Azul</td><td>1</td></tr> </tbody> </table> </div> </td> </tr> </tbody> </table> Quero saber como posso apresentar essa tabela com o jspdf e jspdf-autotable(se for necessário). Nos meus testes ele esta tirando a tabela que esta dentro da tabela principal.
      Eu achei um artigo sobre isso(https://stackoverflow.com/questions/39386969/nested-tables-in-a-pdf-using-jspdf-and-jspdf-autotable) mas não consegui aplicar no meu caso. Obg   
×

Important Information

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