How to change the color of the radio button text when you lose the selection

Navigation
1

I'm trying to change the text color of the radio button when I lose the selection. It happens that these radio buttons are in several tables. The rule is as follows: The screen will be loaded with some one radio button selected per table. When the client selects another radio button, the text of the radio button should be red. So far, okay. The problem is when to return the original selection, the color of this should return to black without affecting the text of the other radio buttons. Here is 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");

});

    
asked by anonymous 20.06.2017 / 19:49

4 answers

0

Tarso64 thank you very much for your help. But I found a solution to my problem. I just needed to tweak 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

    
20.06.2017 / 20:31
0

I think it's a lot easier to do this using CSS.

See if that solves 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>

    
20.06.2017 / 20:06
0

Just an 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>
    
20.06.2017 / 20:49
0

No jquery without library (There is a maxim that says "Less is More").

Many websites use jQuery only for simple validation effects, transition effect, CSS Styles Effect etc. Most often it makes no sense to load a library that will slow down the website performance to make those effects.

  

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

Just a tiny CSS and the radio buttons checked label already put style="color:black" because the style declared inside one 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>

Styles Priority (cascade)

In some cases you can specify different styles for the same page by combining a ".css" file referenced in a link or by inserting a style tag, and also with inline style attributes. If these different specifications conflict with each other, the browser has to decide which values to use. This choice is made on the basis of a cascading style sheet.

This order of priority looks like this:

  • default
  • Browser
  • External CSS (".css" file)
  • Internal CSS (within the tag)
  • Inline styles (within the HTML element)
So an inline style has the highest priority within the cascade, which means that it will override any style declared within the tag, in an external .css file, and in a browser (value default).

SOURCE

    
20.06.2017 / 20:27
Migration with multiple banks in Laravel Is it possible to SEO with website that only contains Images?