1

Estou tentando mudar a cor do texto do radio button ao perder a seleção. Ocorre que esses radio buttons estão em várias tabelas. A regra é a seguinte: A tela será carregada com alguns um radio button selecionado por tabela. Quando o cliente selecionar outro radio button, o texto desse deverá ficar da cor vermelha. Até aqui ok. O problema é quando voltar a seleção original, a cor desse deve voltar a ficar preta sem afetar o texto dos demais radio buttons. Segue o meu código:

<div id="div1">
    <table class="table table-hover table-bordered">
        <tbody>
            <tr>
                <td class="col-md-2"><input type="radio" name="ans" value="0"><label>Dog</label></td>
                <td class="col-md-2"><input type="radio" name="ans" value="1" checked="checked"><label>Horse</label></td>
                <td class="col-md-2"><input type="radio" name="ans" value="2"><label>Cat</label></td>
            </tr>
        </tbody>
    </table>
</div>


<div id="div2">
    <table class="table table-hover table-bordered">
        <tbody>
            <tr>
                <td class="col-md-2"><input type="radio" name="ans2" value="3"><label>Bird</label></td>
                <td class="col-md-2"><input type="radio" name="ans2" value="4"><label>Fish</label></td>
                <td class="col-md-2"><input type="radio" name="ans2" value="5" checked="checked"><label>Frog</label></td>
            </tr>
        </tbody>
    </table>
</div>

    <div id="div3">
    <table class="table table-hover table-bordered">
        <tbody>
            <tr>
                <td class="col-md-2"><input type="radio" name="ans3" value="6" checked="checked"><label>Lion</label></td>
                <td class="col-md-2"><input type="radio" name="ans3" value="7"><label>Panther</label></td>
                <td class="col-md-2"><input type="radio" name="ans3" value="8"><label>Tiger</label></td>
            </tr>
        </tbody>
    </table>
</div>

Jquery:

<script>

var arrayInputs = $('input:radio');
var arrayChecked = $('input:checked');

arrayInputs.change(function() {

    var result = $.inArray(this, arrayChecked);

    //$('label').css('color','#000');


    if(result < 0)
        $(this).next('label').css("color", "red");

});

4 Respostas 4

0

acredito que seja bem mais fácil fazer isto usando CSS.

Veja se isso resolve para você

<html>
<head>
    <style>
        input[type=radio]:checked + label {
          color: red;
        }
    </style>
</head>
<body>
    <div id="div1">
        <table class="table table-hover table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-2"><input type="radio" name="ans" value="0"><label>Dog</label></td>
                    <td class="col-md-2"><input type="radio" name="ans" value="1" checked="checked"><label>Horse</label></td>
                    <td class="col-md-2"><input type="radio" name="ans" value="2"><label>Cat</label></td>
                </tr>                                        
            </tbody>                                         
        </table>                                             
    </div>                                                   


    <div id="div2">                                          
        <table class="table table-hover table-bordered">     
            <tbody>                                          
                <tr>                                         
                    <td class="col-md-2"><input type="radio" name="ans2" value="3"><label>Bird</label></td>
                    <td class="col-md-2"><input type="radio" name="ans2" value="4"><label>Fish</label></td>
                    <td class="col-md-2"><input type="radio" name="ans2" value="5" checked="checked"><label>Frog</label></td>
                </tr>                                        
            </tbody>                                         
        </table>                                             
    </div>                                                   

        <div id="div3">                                      
        <table class="table table-hover table-bordered">     
            <tbody>                                          
                <tr>                                         
                    <td class="col-md-2"><input type="radio" name="ans3" value="6" checked="checked"><label>Lion</label></td>
                    <td class="col-md-2"><input type="radio" name="ans3" value="7"><label>Panther</label></td>
                    <td class="col-md-2"><input type="radio" name="ans3" value="8"><label>Tiger</label></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

2
  • É quase isso mas os radion buttons que vierem checkados quando a página for carregada devem permanecerem pretos. Commented 20/06/2017 às 18:12
  • então tem que ser com javascript mesmo.. vou ver se consigo fazer um exemplo aqui
    – tarso64
    Commented 20/06/2017 às 18:19
0

Tarso64 muito obrigado pela sua ajuda. Mas encontrei uma solução ao meu problema. Só precisei mexer no Jquery.

<script>

var arrayInputs = $('input:radio');
var arrayChecked = $('input:checked');

arrayInputs.change(function() {

    var result = $.inArray(this, arrayChecked);

    //Adicionei essa linha que, pelo input selecionado $(this), busquei pela linha .closest('tr'), 
    //encontrei todos os inputs .find('input'), peguei somente as labels .next('label') e adicionei
    //a cor preta .css('color','#000').
    $(this).closest('tr').find('input').next('label').css('color','#000');

    if(result < 0)
        $(this).next('label').css("color", "red");

});

Obrigado pela sua atenção!!! :-D

0

Só uma alternativa...

<script>
        var arrayInputs = $('input:radio');

        arrayInputs.change(function() {

            var arrayChecked = $('input:checked');
            var result = arrayChecked.toArray().indexOf(this);
            if(result >= 0)
                $(this).next('label').css("color", "red");

            $.each(arrayInputs, function(i, item){
                var result = arrayChecked.toArray().indexOf(item);
                if(result < 0)
                    $(item).next('label').css("color", "black");
            });
        });
    </script>
2
  • Everton, quando testei a sua alteração a cor não mudou em alguns casos, acredito que um dos motivos é que o "arrayChecked" não é atualizado a cada "change", por isso coloquei var arrayChecked = $('input:checked'); dentro do "change". Testa lá!... fico feliz em ajudar =)
    – tarso64
    Commented 20/06/2017 às 19:02
  • Olá Tarso! o arrayChecked deve conter apenas os radio buttons que já foram checkados em um outro formulário. Exemplo, vc respondeu um questionário e o submeteu. Outra pessoa, no caso um gestor, irá ver o que vc respondeu e caso ele mude a sua resposta, a label desse radio button escolhido por esse gestor deverá ficar vermelha para sinalizar que essa não é a sua resposta, devendo ficar preta (a sua resposta) e qualquer outra opção vermelha. Foi a primeira vez que usei essa ferramenta e fiquei feliz em saber que posso contar com pessoas como vc e o Leo :-D Muito obrigado!!! Commented 22/06/2017 às 18:26
0

Sem jquery sem bibioteca (Existe uma máxima que diz o seguinte: "Menos é Mais").

Muitos sites usam jQuery apenas para efeitos simples de validação, efeito de transição, Efeito Estilos CSS etc.. Na maioria das vezes não faz sentido carregar uma biblioteca que vai diminuir a performance do site para fazer esses efeitos.

A dica é: 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.


Basta um pequenino CSS e nos label dos radio buttons checked já colocar style="color:black" porque o estilo declarado dentro de uma tag HTML tem prioridade sobre os demais

input:checked ~ label {
  color: red;
}
<div id="div1">
    <table class="table table-hover table-bordered">
        <tbody>
            <tr>
                <td class="col-md-2"><input type="radio" name="ans" value="0"><label>Dog</label></td>
                <td class="col-md-2"><input type="radio" name="ans" value="1" checked="checked"><label style="color:black">Horse</label></td>
                <td class="col-md-2"><input type="radio" name="ans" value="2"><label>Cat</label></td>
            </tr>
        </tbody>
    </table>
</div>


<div id="div2">
    <table class="table table-hover table-bordered">
        <tbody>
            <tr>
                <td class="col-md-2"><input type="radio" name="ans2" value="3"><label>Bird</label></td>
                <td class="col-md-2"><input type="radio" name="ans2" value="4"><label>Fish</label></td>
                <td class="col-md-2"><input type="radio" name="ans2" value="5" checked="checked"><label style="color:black">Frog</label></td>
            </tr>
        </tbody>
    </table>
</div>

    <div id="div3">
    <table class="table table-hover table-bordered">
        <tbody>
            <tr>
                <td class="col-md-2"><input type="radio" name="ans3" value="6" checked="checked"><label style="color:black">Lion</label></td>
                <td class="col-md-2"><input type="radio" name="ans3" value="7"><label>Panther</label></td>
                <td class="col-md-2"><input type="radio" name="ans3" value="8"><label>Tiger</label></td>
            </tr>
        </tbody>
    </table>
</div>

Prioridade de Estilos (cascata)

Em alguns casos você pode especificar diferentes estilos para a mesma página por meio da combinação de um arquivo ".css" referenciado em link ou com a inserção de uma tag de style, e também com atributos de estilo inline. Se estas diferentes especificações entrarem em conflito entre si, o browser tem que decidir qual dos valores deve usar. Essa escolha é feita com base numa ordem de prioridade (cascading style sheets - "folhas de estilo em cascata").

Esta ordem de prioridade segue assim:

  • default
  • do Browser
  • CSS externo (arquivo ".css")
  • CSS interno (dentro da tag )
  • Estilos inline (dentro do elemento HTML )

Então, um estilo inline tem a maior prioridade dentro da "cascata", o que significa que ele irá fazer um override sobre todo estilo declarado dentro da tag , em um arquivo externo ".css", e em um browser (valor default).

FONTE

2
  • Leo, essa é uma forma bacana de resolver o meu problema! Commented 20/06/2017 às 18:35
  • Leo, a sua explicação foi muito didática e ótima para quem está aprendendo CSS como eu. Com ela, tirei algumas dúvidas sobre prioridades do CSS. Parabéns e muito obrigado! Commented 27/06/2017 às 13:17

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .