Question

I have some radio buttons.

<div class="user">
        <input type="radio" class="user-radio" name="user" value="user"/>
        <p>BLABLA</p>
</div>
<div class="user">
        <input type="radio" class="user-radio" name="user" value="user"/>
        <p>BLABLA</p>
</div>
<div class="user">
        <input type="radio" class="user-radio" name="user" value="user"/>
        <p>BLABLA</p>
</div>

What I’m trying to do is, appending the <div class="user"> with an <a><a/> when the radio button inside that div is checked. And when i choose another radio button, I want to remove the last inserted <a><a/> and insert a new one to the newly selected radio button’s parent div.

I’ve tried something like this but I couldn’t get it to work:

<script>
$('.user').click(function () {
    if (!$(".user-radio").is(':checked')) {
        $(this).append('<a></a>');
    }
})
</script>

Answer 1

See DEMO

$('.user-radio').change(function () {
    $('.user a').remove();
    $('.user-radio:checked').parent().append('<a>hello</a>');
});​