0

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: arial;
        }

        #content {
            width: 400px;
            height: 400px;
            background: green;
            text-align: center;
            line-height: 400px;
            color: #ffffff;
        }

        #yes:checked #content {
            display: block;
        }
 
        #no:checked #content{
            display: none;
        }
    </style>
</head>
<body>
    <p>Deseja visualizar o conteúdo?</p>
    <label for="yes">Sim<input id="yes" name="option" type="radio"></label>
    <label for="no">Não<input id="no" name="option" type="radio"></label>
    <div id="content">
        <h1>Conteúdo</h1>
    </div>
</body>
</html>

No exemplo acima era para quando eu marcar o botão radio com id="yes" ele ser exibido e quando marcar o botão radio com id="no" ele desaparecer, mas não acontece nada, porque?

6
  • 2
    E o JS tá onde meu amigo? 28/01/2020 às 18:57
  • 1
    Não tem! é apenas com o CSS
    – user174750
    28/01/2020 às 19:01
  • 1
    A pseudo-class :checked é usada quando o elemento for marcado e é o que estou fazendo marcando um elemento para algo acontecer com ele, mas não acontece nada a base é que nem esse exemplo pt.stackoverflow.com/questions/261970/…
    – user174750
    28/01/2020 às 19:09
  • Neste exemplo que tu me passou, tem uma resposta, ela não te ajuda? 28/01/2020 às 19:24
  • Não! já resolvi eu deixei uma resposta com a solução, mas valeu!
    – user174750
    28/01/2020 às 19:29

2 Respostas 2

2

Em que parte do código você está implementando essa lógica? Para fazer isso, GERALMENTE se uma linguagem de programação. Nesse caso, a mais usada é JS. Poderíamos implementar o que quer, por exemplo, da seguinte forma:

function verifica(){
  let rdNao = window.document.querySelector('#no').checked	
  let rdSim = window.document.querySelector('#yes').checked
  let conteudo = window.document.querySelector('#content')
  if(rdNao){
    conteudo.style.display = 'none'
  }else{
    conteudo.style.display = 'block'
  }
}
<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: arial;
        }

        #content {
            width: 400px;
            height: 400px;
            background: green;
            text-align: center;
            line-height: 400px;
            color: #ffffff;
        }

        #yes:checked #content {
            display: block;
        }
 
        #no:checked #content{
            display: none;
        }
    </style>
</head>
<body>
    <p>Deseja visualizar o conteúdo?</p>
    <label for="yes">Sim<input onchange="verifica()" id="yes" name="option" type="radio"></label>
    <label for="no">Não<input onchange="verifica()" id="no" name="option" type="radio"></label>
    <div id="content">
        <h1>Conteúdo</h1>
    </div>
</body>
</html>

Mas também é possível usar somente CSS.

3
  • Se é necessário utilizar javascript ou outra linguagem de programação, como nessa resposta pt.stackoverflow.com/a/261985/157404 ele conseguiu fazer somente com CSS ? 28/01/2020 às 19:20
  • Já foi corrigido... 28/01/2020 às 19:23
  • Não colega! mas muito obrigado por ter tentado ajudar no meu caso eu só queria com CSS, mas eu já consegui resolver e deixei uma resposta com a solução, obrigado!
    – user174750
    28/01/2020 às 19:28
1

Eu consegui resolver o problema na seguinte linha:

    #yes:checked #content {
        display: block;
    }

    #no:checked #content{
        display: none;
    }

Eu estou informando que o elemento com id="content" está dentro do elemento id="yes" e id="no", isso porque estou usando o seletor decendente e no qual eu devo usar o seletor de irmão já que o elemento id="content" está logo após dos elementos de entrada, então alterando a linha fica assim:

    #yes:checked ~ #content {
        display: block;
    }

    #no:checked ~ #content{
       display: none;
    }

Então os elementos de entradas não podem estar dentro dos paragráfos, nessas linhas também devem ser alteradas se não o seletor de irmão não selecionará o elemento id="content":

Antes

    <label for="yes">Sim<input id="yes" name="option" type="radio"></label>
    <label for="no">Não<input id="no" name="option" type="radio"></label>

Depois

    <label for="yes">Sim</label><input id="yes" name="option" type="radio">
    <label for="no">Não</label><input id="no" name="option" type="radio" checked="checked">

O código por completo fica assim:

        <!doctype html>
        <html lang="pt-br">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style>
                body {
                    font-family: arial;
                }
        
                #content {
                    width: 400px;
                    height: 400px;
                    background: green;
                    text-align: center;
                    line-height: 400px;
                    color: #ffffff;
                    display: none;
                }
        
                #yes:checked ~ #content {
                    display: block;
                }
        
                #no:checked ~ #content{
                    display: none;
                }
            </style>
        </head>
        <body>
            <p>Deseja visualizar o conteúdo?</p>
            <label for="yes">Sim</label><input id="yes" name="option" type="radio">
            <label for="no">Não</label><input id="no" name="option" type="radio" checked="checked">
            <div id="content">
                <h1>Conteúdo</h1>
            </div>
        </body>
        </html>

Você deve fazer log-in para responder a esta pergunta.