Question

I’m trying to apply CSS to the element next to a radio button, but nothing happens:

 $('.ordering-options input[type="radio"]').live("change", function(){
    $('input[type="radio"]:checked').next().css('color', 'red');
  });

(I also want the default checked radio button to have the CSS applied before any action)

Any suggestions in order to accomplish this?

EDIT: The CSS is applied and disappears in a second.

HTML:

<fieldset class="ordering-options">
    <h2 class="ordering-method">Ordering method:</h2>

    <ul>
      <li><input type="radio" name="take-out" value="false" checked="checked" class=
      "takeout-select" /><span>Take Out</span></li>
    </ul>

    <ul>
      <li><input type="radio" name="delivery" value="true" class=
      "delivery-select" /><span>Delivery</span></li>
    </ul>
  </fieldset>

(‘Take out’ is red by default. If the user clicks ‘Delivery’, the span after it will turn red and vice versa).

Answer 1

I’m not sold on that HTML structure, but if you’d like to stick with it you could use the following: jsFiddle

function colorRadio(){
    $('.ordering-options input[type="radio"]').closest('li').find('span').css('color', 'black');
    $('.ordering-options input[type="radio"]:checked').closest('li').find('span').css('color', 'red');
}
colorRadio()
$('.ordering-options input[type="radio"]').on("change", colorRadio);

It’s a function that first resets all the labels to ‘black’, then changes the checked ones to ‘red’. You run it once on page-load, then once for every change of a radio button.

PS: if you want “radio” buttons they have to have the same “name” or they aren’t linked