input type="radio"

[Biel. 9]

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>

 

[wanderval 19]

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;

 

[Biel. 9]

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

[wanderval 19]

 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

[Biel. 9]

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>

 

[wanderval 19]

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

[Biel. 9]

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 !

 

 

 

[wanderval 19]

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();

 

[Biel. 9]

Wanderval, tarefa resolvida. Muito obrigado.