jQuery each loop always return the last value

Question

I have 3 radio buttons and a parragraph. What I have to do is to check a button, and then, change the color of the paragraph.

<p id="pColor">Este párrafo cambiará de color según el valor del radio seleccionado.</p>

<form name="formColor">
    <input type="radio" name="color" value="red" id="red"/>Rojo
    <input type="radio" name="color" value="green" id="green"/>Verde
    <input type="radio" name="color" value="blue" id="blue"/>Azul
</form>

This is my jQuery code:

$(document).ready(function(){
    $("input[name='color']").change(function(){
        cambiaColor()
    });
});

    var cambiaColor=function(){
        $("input").each(function(){
            $("#pColor").css("color",$(this).val());
        });

    }

The text always turn blue, no matter what button I checked

possible duplicate of [How can I get which radio is selected via jQuery?](http://stackoverflow.com/questions/596351/how-can-i-get-which-radio-is-selected-via-jquery) — Cerbrus, Jan 31 '14 at 08:00

score 2 · Accepted Answer · edited May 23 '17 at 11:56

2

Why you are using .each for that? Use onClick instead

$("input").on('click', function(){
    $("#pColor").css("color",$(this).val());
});

Demo

All you need is the above code, nothing else... Demo, can also replace $(this).val() to this.value as pointed out by ^@Cerbrus

Note: I've just used input as a selector there which is too general, so make sure you make it specific by using $('input[name="color"][type="radio"]')

Also, make use of label, will enhance user experience, it's not comfortable to press the radios always...

Demo (Click the text and the radios will be selected)

edited May 23 '17 at 11:56

Community

1
1

answered Jan 31 '14 at 08:00

Mr. Alien

153,751
34
298
278

1

Don't bother checking which one is `checked`, just handle the click event on the radio button? I like your style :D Nice and simple. – Cerbrus Jan 31 '14 at 08:02
1

@Cerbrus I take that as a compliment and not sarcasm yea? :D – Mr. Alien Jan 31 '14 at 08:04
1

It was intended as a compliment. – Cerbrus Jan 31 '14 at 08:05
Also: `this.value` ;) – Cerbrus Jan 31 '14 at 08:07

score 1 · Answer 2 · answered Jan 31 '14 at 08:00

it should be

$(document).ready(function () {
    $("input[name='color']").change(function () {
        $("#pColor").css("color", this.value);
    });
});

Demo: Fiddle

in your case you are iterating over all the input elements and calls the .css(...) in the loop which sets the value in the loop - so only the last value will be applied

score 1 · Answer 3 · answered Jan 31 '14 at 08:10

because you are iterating through all radio button, so it will change its color one by one and finally it will apply the last one.

you should try

$(document).ready(function () {
    $("input").on('click', function(){
        $("#pColor").css("color",$(this).val());
    });
});

score 0 · Answer 4 · answered Jan 31 '14 at 08:00

0

Of course, because you are looping all options and everytime you assign color - it will always end with last one. You have to modifiy your JS code like this:

$(document).ready(function () {
   $("input[name='color']").change(function () {
      $("#pColor").css("color", $("input[name='color']:checked").val());
   });
});

Check this JSFiddle.

answered Jan 31 '14 at 08:00

Pavel Štěrba

2,822
2
28
50

Just use `$(this).val()`, it returns the same DOM element. Or better yet, `this.value` – Cerbrus Jan 31 '14 at 08:06

score 0 · Answer 5 · edited Jan 31 '14 at 08:04

Because you are using the loop and it internally changes for all the three but after everything seems to be over you see only the last change.

Come on it is in a loop.

var cambiaColor=function(){
    $("input").each(function(){
        $("#pColor").css("color",$(this).val());
    });

}

Analysis,

each loop,

1st iteration:
pColor will have the color RED

2nd iteration:
pColor will have the color GREEN

3rd iteration:
pColor will have the color BLUE

Since computational tasks happen in less than nano second your eye is unable to adjust itself for all the 3 changes and finally settling only for the final change.

score 0 · Answer 6 · answered Jan 31 '14 at 08:00

That is because your loop will simply iterate over all the input fields, not only the selected one. This will result in the last input element's value being used, which in your case is the one with as its value "blue". That is why you always end up with blue.

You should be using the checked input items's value. You can do this as follows:

var cambiaColor = function() {
     $("#pColor").css("color", $('input[name='color']:checked').val());
}

jQuery each loop always return the last value

6 Answers6