Skip to main content
adicionou 1155 caracteres ao conteúdo
Fonte Link
user60252
user60252

A pseudo-classe :checked de um seletor CSS representa um elemento radio (<input type="radio">), checkbox (<input type="checkbox">) ou option (<option> em um <select>) que está marcada ou alternado para um estado ligado. Quando um input é checado, ele recebe as características que você quiser. Usando o + label, retornamos apenas o primeiro objeto imediatamente ao redor deste input. Isso significa que o seletor irá retornar o label imediatamente ao lado de um input que está selecionado.

Basta um pequenino CSSExemplo 1

:checked + label {
    display :none;
}
<div class="fomulario">
    <form class="avlac" id="avlac"  name="avlac">
        <input type="radio" id="mtruim" name="av1" value="Muito Ruim">
        <label for="mtruim"><img name="imgl" id="img1" src="https://i.sstatic.net/E2xBV.png"></label> 

        <input type="radio" id="ruim" name="av1" value="Ruim">
        <label for="ruim"><img name="imgl" id="img2" src="https://i.sstatic.net/2nfI1.png"></label> 

        <input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
        <label for="maisoumenos"><img name="imgl" id="img3" src="https://i.sstatic.net/OBecB.png"></label> 

        <input type="radio" id="bom" name="av1" value="Bom">
        <label for="bom"><img name="imgl" id="img4" src="https://i.sstatic.net/Javo4.png"></label> 

        <input type="radio" id="mtbom" name="av1" value="Muito Bom">
        <label for="mtbom"><img name="imgl" id="img5" src="https://i.sstatic.net/dz7Wr.png"></label> 

        <input type="radio" id="otimo" name="av1" value="Otimo">
        <label for="otimo"><img name="imgl" id="img6" src="https://i.sstatic.net/xJC07.png"></label> 
        <input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
    </form>
</div>

Exemplo 2

:checked + label {
    font: italic bold 20px Georgia, serif;
    color:red;
}
<div class="fomulario">
    <form class="avlac" id="avlac"  name="avlac">
        <input type="radio" id="mtruim" name="av1" value="Muito Ruim">
        <label for="mtruim">muito ruim</label> 

        <input type="radio" id="ruim" name="av1" value="Ruim">
      <label for="ruim">ruim</label>    

        <input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
        <label for="maisoumenos">mais ou menos</label> 

        <input type="radio" id="bom" name="av1" value="Bom">
        <label for="bom">bom</label> 

        <input type="radio" id="mtbom" name="av1" value="Muito Bom">
        <label for="mtbom">muito bom</label> 

        <input type="radio" id="otimo" name="av1" value="Otimo">
        <label for="otimo">otimo</label> 
        <input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
    </form>
</div>

A pseudo-classe :checked de um seletor CSS representa um elemento radio (<input type="radio">), checkbox (<input type="checkbox">) ou option (<option> em um <select>) que está marcada ou alternado para um estado ligado. Quando um input é checado, ele recebe as características que você quiser. Usando o +, retornamos apenas o primeiro objeto imediatamente ao redor deste input. Isso significa que o seletor irá retornar o label imediatamente ao lado de um input que está selecionado.

Basta um pequenino CSS

:checked + label {
    display :none;
}
<div class="fomulario">
    <form class="avlac" id="avlac"  name="avlac">
        <input type="radio" id="mtruim" name="av1" value="Muito Ruim">
        <label for="mtruim"><img name="imgl" id="img1" src="https://i.sstatic.net/E2xBV.png"></label> 

        <input type="radio" id="ruim" name="av1" value="Ruim">
        <label for="ruim"><img name="imgl" id="img2" src="https://i.sstatic.net/2nfI1.png"></label> 

        <input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
        <label for="maisoumenos"><img name="imgl" id="img3" src="https://i.sstatic.net/OBecB.png"></label> 

        <input type="radio" id="bom" name="av1" value="Bom">
        <label for="bom"><img name="imgl" id="img4" src="https://i.sstatic.net/Javo4.png"></label> 

        <input type="radio" id="mtbom" name="av1" value="Muito Bom">
        <label for="mtbom"><img name="imgl" id="img5" src="https://i.sstatic.net/dz7Wr.png"></label> 

        <input type="radio" id="otimo" name="av1" value="Otimo">
        <label for="otimo"><img name="imgl" id="img6" src="https://i.sstatic.net/xJC07.png"></label> 
        <input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
    </form>
</div>

A pseudo-classe :checked de um seletor CSS representa um elemento radio (<input type="radio">), checkbox (<input type="checkbox">) ou option (<option> em um <select>) que está marcada ou alternado para um estado ligado. Quando um input é checado, ele recebe as características que você quiser. Usando o + label, retornamos apenas o primeiro objeto imediatamente ao redor deste input. Isso significa que o seletor irá retornar o label imediatamente ao lado de um input que está selecionado.

Exemplo 1

:checked + label {
    display :none;
}
<div class="fomulario">
    <form class="avlac" id="avlac"  name="avlac">
        <input type="radio" id="mtruim" name="av1" value="Muito Ruim">
        <label for="mtruim"><img name="imgl" id="img1" src="https://i.sstatic.net/E2xBV.png"></label> 

        <input type="radio" id="ruim" name="av1" value="Ruim">
        <label for="ruim"><img name="imgl" id="img2" src="https://i.sstatic.net/2nfI1.png"></label> 

        <input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
        <label for="maisoumenos"><img name="imgl" id="img3" src="https://i.sstatic.net/OBecB.png"></label> 

        <input type="radio" id="bom" name="av1" value="Bom">
        <label for="bom"><img name="imgl" id="img4" src="https://i.sstatic.net/Javo4.png"></label> 

        <input type="radio" id="mtbom" name="av1" value="Muito Bom">
        <label for="mtbom"><img name="imgl" id="img5" src="https://i.sstatic.net/dz7Wr.png"></label> 

        <input type="radio" id="otimo" name="av1" value="Otimo">
        <label for="otimo"><img name="imgl" id="img6" src="https://i.sstatic.net/xJC07.png"></label> 
        <input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
    </form>
</div>

Exemplo 2

:checked + label {
    font: italic bold 20px Georgia, serif;
    color:red;
}
<div class="fomulario">
    <form class="avlac" id="avlac"  name="avlac">
        <input type="radio" id="mtruim" name="av1" value="Muito Ruim">
        <label for="mtruim">muito ruim</label> 

        <input type="radio" id="ruim" name="av1" value="Ruim">
      <label for="ruim">ruim</label>    

        <input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
        <label for="maisoumenos">mais ou menos</label> 

        <input type="radio" id="bom" name="av1" value="Bom">
        <label for="bom">bom</label> 

        <input type="radio" id="mtbom" name="av1" value="Muito Bom">
        <label for="mtbom">muito bom</label> 

        <input type="radio" id="otimo" name="av1" value="Otimo">
        <label for="otimo">otimo</label> 
        <input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
    </form>
</div>
Fonte Link
user60252
user60252

Antes de tentar fazer algo com JS ou jQuery tenha certeza que não é possível fazer com Propriedades CSS3. Essa simples mudança vai melhorar muito a performance do seu site.

A pseudo-classe :checked de um seletor CSS representa um elemento radio (<input type="radio">), checkbox (<input type="checkbox">) ou option (<option> em um <select>) que está marcada ou alternado para um estado ligado. Quando um input é checado, ele recebe as características que você quiser. Usando o +, retornamos apenas o primeiro objeto imediatamente ao redor deste input. Isso significa que o seletor irá retornar o label imediatamente ao lado de um input que está selecionado.


Basta um pequenino CSS

:checked + label {
    display :none;
}
<div class="fomulario">
    <form class="avlac" id="avlac"  name="avlac">
        <input type="radio" id="mtruim" name="av1" value="Muito Ruim">
        <label for="mtruim"><img name="imgl" id="img1" src="https://i.sstatic.net/E2xBV.png"></label> 

        <input type="radio" id="ruim" name="av1" value="Ruim">
        <label for="ruim"><img name="imgl" id="img2" src="https://i.sstatic.net/2nfI1.png"></label> 

        <input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
        <label for="maisoumenos"><img name="imgl" id="img3" src="https://i.sstatic.net/OBecB.png"></label> 

        <input type="radio" id="bom" name="av1" value="Bom">
        <label for="bom"><img name="imgl" id="img4" src="https://i.sstatic.net/Javo4.png"></label> 

        <input type="radio" id="mtbom" name="av1" value="Muito Bom">
        <label for="mtbom"><img name="imgl" id="img5" src="https://i.sstatic.net/dz7Wr.png"></label> 

        <input type="radio" id="otimo" name="av1" value="Otimo">
        <label for="otimo"><img name="imgl" id="img6" src="https://i.sstatic.net/xJC07.png"></label> 
        <input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
    </form>
</div>

Fontes: