I thought I'd update the community with the working code. In order to
get this working in Safari I took advise from the following thread and
created a trigger on the label as well as the input element.

http://groups.google.com/group/jquery-en/browse_thread/thread/149c4f8a32a846a2/

Here's my final code:
$(document).ready(function() {
        $('#searchLabels').addClass('active'); // allows styling when JS is
enabled
        $('#searchLabels :radio[id]').click( function() {
                var selectedInput = $(this).attr("id");
                $('#searchLabels label').removeClass("selected");
                $('#searchLabels label[for="' + selectedInput +
'"]').addClass("selected");
        });
        $('#searchLabels label').click( function() {
                $('#searchLabels label').removeClass("selected");
                $(this).addClass("selected");
        });
});

and here it is in action in the top search area (turn off JS to see
how nicely it degrades):
http://deliciouslivingmag.com/

On Dec 3, 12:39 pm, sperks <[EMAIL PROTECTED]> wrote:
> I think that this bit of script is adding a class to the for
> attribute, but I'm wanting to add the class to the element that has
> that for attribute.  Can anyone help me do the targeting better?
> Thanks
>
> $(document).ready(function() {
>         $('div#searchLabels').addClass('active'); // allows me to style the
> radio buttons differently when JS is enabled
>         $('div#searchLabels :radio[id]').click( function() {
>                 var selectedInput = $(this).text();
>                 $('div#searchLabels label').removeClass("selected");
>                 $('div#searchLabels label.attr("for","' + selectedInput +
> '")').addClass("selected");
>         });
>
> });

Reply via email to