Question

Unless I am mistaken. jQuery and CSS handle the :checked selector very differently. In CSS when I use :checked, styles are applied appropriately as I click around, but in jQuery it only seems to recognize what was originally in the DOM on page-load. Am I missing something?

Here is my Fiddle

In jQuery:

$('input:checked').click(function () { 
   $('input:checked').css('background','#FF0000');
   $('input:checked+label').css('background','#ff0000');
});

In CSS:

input:checked+label {font-weight:bold;color:#5EAF1E}

UPDATE:
I should clarify that what I am looking to do is trigger behavior if a user clicks an already selected radio button.

Answer 1

AFTER UPDATE

Keep track of the status of the radio buttons. For example, use .data() to keep an in-memory state of the radio buttons.

$(function () {
    var $radio = $(":radio");
    $radio.filter(":checked").data("checked", true);
    $radio.on("click", function () {
        if ($(this).data("checked")) {
            alert("Already selected");
        }
        $radio.data("checked", false).filter(":checked").data("checked", true);
    });
});

See it live here.

---

BEFORE UPDATE

I think you want to use .change() here.

$('input:radio').change(function () {
    $('input, input+label').css('background', '');
    $('input:checked, input:checked+label').css('background', '#f00');
}).change();

See it live here.