Jump to content
Biel.

input type="radio"

Recommended Posts

Olá pessoal. Direto ao ponto. Nesta URL temos dois input type="radio" e alguns links.  Gostaria que ao clicar em um link qualquer o input type=""radio que marquei continuasse marcado . Segue o código que está na URL . Obrigado !

<style>
.box1{ margin-bottom:10px; }
.tete_label{ cursor:pointer; }
.box2{ display:none; }
input:checked ~ .box2{ display:block; }
</style>

<div class="box1">
    <input type="radio" name="item"   id="1"   />
      <label for="1" class="tete_label"  >Cores</label>
     <div class="box2">
            <a href="19_5a.php">verde</a><br>
            <a href="19_5b.php">azul</a><br>
            <a href="19_5c.php">violeta</a><br>
     </div>
   </div>
<!--  ------------------------------------------------  --> 
<div class="box1">
    <input type="radio" name="item"  id="2"   />
    <label for="2" class="tete_label" >Carros</label>
     <div class="box2">
            <a href="19_6a.php">fiat</a><br>
            <a href="19_6b.php">palio</a><br>
            <a href="19_6c.php">corsa</a><br>
     </div>
   </div>

...

<script>
var  teste1 = document.getElementById('1').checked=true;	
function func_1(){
}
</script>

 

Share this post


Link to post
Share on other sites

Bom você poderia usar a URl como base

JS:

var pathname = location.pathname;
var radioSelected = pathname.includes('19_5') ? '1' ; '2';

document.getElementById(radioSelected).checked=true;

 

Share this post


Link to post
Share on other sites

Quando clico no link  o input type="radio" não permanece checked . Fiz algumas tentativas  e não conseguir.

Share this post


Link to post
Share on other sites

 Cara mostre códigos aqui, apenas argumentar, não é o objetivo desse forum! Mostre sua implementação ou analise o problema atual!

a lógica passei faz sentido, então está dando algum erro suba no servidor pra eu poder ajudar

Share this post


Link to post
Share on other sites

Wanderval fiquei animado. Veja alguns teste que fiz. Obrigado 

<div class="box1">
    <input type="radio" name="item"   id="1"   />
      <label for="1" class="tete_label"  >Cores</label>
     <div class="box2">
            <a href="19_5a.php" onClick="func_2()">verde</a><br>
            <a href="19_5b.php" onClick="func_2()">azul</a><br>
            <a href="19_5c.php" onClick="func_2()">violeta</a><br>
     </div>
   </div>

<p id="p1"></p>   

<script>
function func_2(){
// var x = location.href;  // <- teitei assim
var x = location.pathname;
//var radioSelected = x.includes('19_5a.php') ? '1'; // <- teitei assim
document.getElementById('p1').innerHTML=x; 
document.getElementById('1').checked=true; // <- teitei assim
//document.getElementById(radioSelected).checked=true; // <- teitei assim
}
</script>

 

Share this post


Link to post
Share on other sites

Pelo que colocou ai o código que fiz você copiou errado faltando a segunda condição e ainda modificou a validação! '19_5' para '19_5a.php'.

-Outro ponto nesse ex você apenas mostrou um código relacionado a rádio e no anterior no servidor existem 2.

-Outro ponto você está confundindo as coisas o método func_2 não esta fazendo nada! essa execução de código deveria ocorrer no carregamento da pagina, assim lendo a url e setando radio correto, nessa lógica atual após você clicar em um link você é redirecionado e tudo e carregado novamente que é o esperado, dessa forma essa chamada de método nunca surtira efeito.

 

Uma pergunta porque quer fazer isso? Acho que essa resposta é importante

 

Código:

var radioSelected = pathname.includes('19_5') ? '1' ; '2';

Atual:

// var radioSelected = x.includes('19_5a.php') ? '1'; // <- teitei assim

Não entendo sua insistência em um valor fixo, o que espera conseguir de diferente se sua lógica sempre for '1'? Logo sempre será o primeiro radio!

document.getElementById('1').checked=true; // <- teitei assim

Share this post


Link to post
Share on other sites
2 horas atrás, wanderval disse:

ainda modificou a validação! '19_5' para '19_5a.php'.

O link que postei foi 19_5a  e não 19_5 

 

2 horas atrás, wanderval disse:

Outro ponto nesse ex você apenas mostrou um código relacionado a rádio e no anterior no servidor existem 2.

Fiz algumas modificações para tentar resolver o problema de alguma forma. 

Você me apresentou uma  ideia de como resolver o problema. Entendi sua ideia e fiz vários testes para encontrar a solução; não conseguir !   É desnecessário postar novamente todo o código na integra CSS + dois input type="radio" + javascript  uma vez que o mesmo já foi postado  na integra neste fórum e . Nesta URL . Se eu conseguisse fazer a coisa funcionar com um input type="radio" ,  conseguiria fazer funcionar com 2,3,4 ou mais inputs.

 

2 horas atrás, wanderval disse:

Não entendo sua insistência em um valor fixo, o que espera conseguir de diferente se sua lógica sempre for '1'?

Não existe valor fixo. É como disse: Fiz algumas modificações para tentar resolver o problema de alguma forma. Se eu conseguisse fazer a coisa funcionar com um input type="radio" ,  conseguiria fazer funcionar com 2,3,4 ou mais inputs.

Wanderval,  a solução virá rapidamente. Vamos resolver este problema juntos? Estou animado !

 

 

 

Share this post


Link to post
Share on other sites
Em 14/02/2021 at 16:59, Biel. disse:

O link que postei foi 19_5a  e não 19_5 

 

Fiz algumas modificações para tentar resolver o problema de alguma forma. 

Você me apresentou uma  ideia de como resolver o problema. Entendi sua ideia e fiz vários testes para encontrar a solução; não conseguir !   É desnecessário postar novamente todo o código na integra CSS + dois input type="radio" + javascript  uma vez que o mesmo já foi postado  na integra neste fórum e . Nesta URL . Se eu conseguisse fazer a coisa funcionar com um input type="radio" ,  conseguiria fazer funcionar com 2,3,4 ou mais inputs.

 

Não existe valor fixo. É como disse: Fiz algumas modificações para tentar resolver o problema de alguma forma. Se eu conseguisse fazer a coisa funcionar com um input type="radio" ,  conseguiria fazer funcionar com 2,3,4 ou mais inputs.

Wanderval,  a solução virá rapidamente. Vamos resolver este problema juntos? Estou animado !

 

 

 

Bom Biel eu não faria dessa forma, eu havia lhe perguntado qual é o motivo do seu objetivo, e havia dito que a resposta é importante!

Motivo é: Se você é um estudante de tecnologia existem outras formas de obter esse resultado pensando em aplicações, agora se você é apenas uma pessoa que estuda por hobby existe uma forma sim de contornar a situação usando GET e parâmetros na URL.

 

<div class="box2">
  <a href="19_5a.php?category=1">verde</a><br>
  <a href="19_5b.php?category=1">azul</a><br>
  <a href="19_5c.php?category=1">violeta</a><br>
</div>

PHP:

<?php
	$categoryId = $_GET['category'];
?>

JS:

var categoryId = <?php echo json_encode($categoryId); ?>;
document.getElementById(categoryId).checked=true;

para aplicações existe o conceito de SPA (Single Page Aplication), isso foi um dos problemas no passado para remover a dependência de tecnologias de back-end como o PHP. então basicamente o que você esta tentando fazer é reproduzir um cenário que era comum alguns anos atras mas hoje, deveria ser evitada.

 

Mas quando se fala de paginas e não aplicações sim é usado o php, mas sendo bem especifico frameworks php

vou deixar um exemplo de código muito básico que mostra um pouco do que seria o SPA, mas evidente que frameworks como vue.js, react.js são mais indicados, atualmente é usado o conceito de rotas nesses frameworks e não apenas nomes de arquivos e diretórios.

 

ex:

 

HTML

<html>
  <head>Router test</head>
  <body>
    <ul id="route-links">
      <li route="/" page="home">Home</li>
      <li route="/Contact" page="contact">Contact</li>
      <li route="/Product" page="product">Products</li>
      <li route="/Category" page="category">Category</li>
    </ul>

    <div class="page" id="home">
      home
    </div>

    <div class="page" id="contact">
      contato
    </div>

    <div class="page" id="product">
      product
    </div>

    <div class="page" id="category">
      category
    </div>

    <script src="./script.js"></script>
  </body>
</html>

JS:

// Handler Route Redirect
function activeRouteLinkListening() {
  const link = document.getElementById("route-links");

  link.addEventListener("click",function(e) {
    let id = e.target.attributes[0].value;
    let page = e.target.attributes[1].value;
    
    setCurrentState(id, page);
  });
}

function setCurrentState(id, page) {
  history.pushState({id, page}, `Selected: ${id}`, `#${id}`)
  displayCurrentPage(page);
}

// Handler Default Route
function displayCurrentPage(historyPage) {
  if(!history.state) {
    setDefaultState();
  }
  const pages = Array.from(document.getElementsByClassName('page'));
  const statePage = historyPage || history.state.page;

  pages.forEach(page => {
    page.style.display = statePage !== page.id
      ? 'none'
      : 'block';
  });
}

function setDefaultState() {
  history.replaceState({id: '/', page: 'home'}, 'Default state', './');
}

function activePopStateListening() {
  window.addEventListener('popstate', e => {
    displayCurrentPage(e.state && e.state.page);
  });
}

function init() {
  displayCurrentPage();
  activeRouteLinkListening();
  activePopStateListening();
}

init();

 

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 Biel.
      Olá pessoal. Direto ao ponto. Estou tentando enviar os dados sem refresh na página.  Obrigado!
       
      pagina1.php <?php @$nome = $_POST['nome']; print $nome.'<br><br><br>'; ?> <script> function enviarSemRefrash() { } </script> <form id="formulario" action="" method="post"> Nome: <br /> <input name="nome" type="text" id="nome" size="35" /> <br /><br /> <input type="submit" name="acao" onClick="enviarSemRefrash()" value="Enviar" /> </form>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Ex1 retorna normalmente os elementos do array. Como fazer o EX2 também retornar os elementos do array. Obrigado!
       
      Ex1 <?php $dados = array('teste1', 'teste2', 'teste3', 'teste4'); for($a=0; $a<count($dados); $a++){ print $dados[$a].'<br>'; } ?> Ex2 <?php $dados = array(`teste1`, `teste2`, `teste3`, `teste4`); for($a=0; $a<count($dados); $a++){ print $dados[$a]; } ?>  
    • By Biel.
      Olá pessoal. Direto ao ponto. EX1 imprime dados repetidos. EX2 não imprime dados repetidos. Que função uso no  EX1 para imprimir somente dados não repetidos? Obrigado !
       
      EX1
      <?php $a=1; $b=2; $c=1; $d=4; $e=5; $imprime=$a.'<br>'.$b.'<br>'.$c.'<br>'.$d.'<br>'.$e; print $imprime; ?> EX2
      <?php $a=1; $b=2; $c=3; $d=4; $e=5; $imprime=$a.'<br>'.$b.'<br>'.$c.'<br>'.$d.'<br>'.$e; print $imprime; ?>  
    • By Biel.
      Olá pessoal. direto ao ponto. Suponha que o código abaixo é um site.
      a navegação interna entre os links funciona normalmente sem refresh na pagina, mas na ul não passa o link que foi pressionado. Como fazer passar na url o link que foi pressionado ?
       
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //$("#tete").click(function( e ){ $("#menu a").click(function( e ){ e.preventDefault(); var href = $( this ).attr('href'); $("#content").load( href +" #content"); }); }); </script> ...
      index.php <ul id="menu"> <li><a href="index.php" id="tete">Home</a></li> <li><a href="fotos.php" id="tete">Fotos</a></li> <li><a href="contato.php" id="tete">Contato</a></li> </ul> <div id="content"> <h1>esta é a pagina index</h1> </div> <hr> fotos.php <ul id="menu"> <li><a href="index.php" id="tete">Home</a></li> <li><a href="fotos.php" id="tete">Fotos</a></li> <li><a href="contato.php" id="tete">Contato</a></li> </ul> <div id="content"> <h1>esta é a pagina fotos</h1> </div> <hr> contato.php <ul id="menu"> <li><a href="index.php" id="tete">Home</a></li> <li><a href="fotos.php" id="tete">Fotos</a></li> <li><a href="contato.php" id="tete">Contato</a></li> </ul> <div id="content"> <h1>esta é a pagina contato</h1> </div> <hr>  
    • By Biel.
      Olá pessoal. direto ao ponto. O código abaixo está ok, clico no botão e o javascript  mostra o conteúdo da div. Gostaria que mesmo atualizando a página/f5 o conteúdo da div continuasse visível. Como resolver este problema? Obrigado !
      <div id="id_tete" style="background:#EBEBEB; font-size:30px; display:none; "> manter conteudo da div visivel mesmo atualizando a página/f5 </div> <button name="ffsd" onClick="func_mostrar()">click</button> <script> function func_mostrar(){ var x = document.getElementById("id_tete"); x.style.display = "block"; } </script>  
×

Important Information

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