How to change the color of the radio button text when losing selection

Asked

Viewed 1,089 times

1

I am trying to change the color of the radio button text when losing the selection. It turns out that these radio Buttons are on several tables. The rule is as follows: The screen will be loaded with some a radio button selected per table. When the client selects another radio button, its text should be red. So far ok. The problem is when the original selection comes back, the color of this should turn black again without affecting the text of the other radio Uttons. Just follow my code:

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

});

jquery table radiobutton

4 answers

0

I believe it is much easier to do this using CSS.

See if this settles it for you

<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>

  • It’s almost that but the Radion Buttons that come checked when the page is loaded should remain black.

  • then it has to be with javascript anyway.. I’ll see if I can make an example here

0

No jquery without library (There is a saying: "Less is More").

Many websites use jQuery only for simple validation effects, transition effect, CSS Styles effect etc.. Most of the time it makes no sense to load a library that will decrease the performance of the site to make these effects.

The tip is: before trying to do something with JS or jQuery make sure you can’t do it with CSS3 Properties. This simple change will greatly improve the performance of your site.

Just a little CSS and on the label of the radio Buttons checked already put style="color:black" because the style declared inside an HTML tag has priority over the others

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>

Priority of Styles (cascade)

In some cases you can specify different styles for the same page by combining a "file. css" referenced in link or with the insertion of a style tag, and also with inline style attributes. If these different specifications conflict with each other, the browser has to decide which of the values to use. This choice is made based on a priority order (Cascading style Sheets - "cascading style sheets").

This order of priority follows::

  • default
  • browser
  • External CSS (file ". css")
  • Internal CSS (within tag )
  • Inline styles (inside the HTML element )

So, an inline style has the highest priority within the "cascade", which means that it will override over any style declared within the tag in an external file ". css", and in a browser (default value).

SOURCE

  • Leo, that’s a nice way to solve my problem!

  • Leo, your explanation was very didactic and great for those who are learning CSS like me. With it, I got some questions about CSS priorities. Congratulations and thank you very much!

0


Tarso64 thank you so much for your help. But I found a solution to my problem. All I had to do was touch 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");

});

Thank you for your attention!!! -D

0

Only one alternative...

<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>

  • Everton, when I tested your change the color has not changed in some cases, I believe one of the reasons is that the "Hecked" arrayChecked is not updated with each "change", so I put var arrayChecked = $('input:checked'); inside the "change". Forehead there!... I’m happy to help =)

  • Hello Tarso! The Hecked arrayChecked should only contain radio Buttons that have already been checked in another form. For example, you answered a questionnaire and submitted it. Another person, in this case a manager, will see what you answered and if he changes your answer, the label of that radio button chosen by that manager should be red to signal that this is not your answer, and should be black (your answer) and any other red option. It was the first time I used this tool and I was happy to know that I can count on people like you and Leo :-D Thank you very much!!!

Browser other questions tagged jquery table radiobutton

You are not signed in. Login or sign up in order to post.