El selector de imagen jquery no funciona en IE7

Question

Así que tengo algunos html así:

<div id="avatar_choices">
    <label for="id_choice_0">
        <input id="id_choice_0" type="radio" name="choice" value="7" />
        <img src="someimage.jpg" />
    </label>
    <label for="id_choice_1">
        <input id="id_choice_1" type="radio" name="choice" value="8" />
        <img src="someimage2.jpg" />
    </label>
</div>

Y algún script:

$('#avatar_choices input').hide();
$('#avatar_choices img').click(function(){
    $('#avatar_choices img').css('border', '2px solid #efefef');
    $(this).css('border', '2px solid #39c');
    $(this).siblings('input').attr('checked', 'checked');
});

El objetivo es permitir que el usuario haga clic en las opciones de imagen, haciendo que el seleccionado se resalte con un color de borde.

Esto funciona bien en FF. Por alguna razón en IE, una vez que hago clic en una imagen, hago clic en otra imagen, luego trato de hacer clic en la primera, el borde no cambiará (aunque se seleccione).

EDITAR: Mi solución terminó sucediendo a medias por accidente. Cambié el código a esto debido a la respuesta de redsquare:

$('#avatar_choices input').hide();
$('#avatar_choices img').click(function(){
    $('#avatar_choices img').removeClass('selected');
    $(this).addClass('selected');
    $(this).siblings('input').attr('checked', 'checked');
});

donde:

#avatar_choices img.selected{border:2px solid #39c;}

Ir a la figura.

Answer 1

mejor usando addClass y removeClass en este escenario. Más fácil de mantener. ¿Puedes pegar tu html completo para que pueda ver tu doctype, etc.