javascript - jquery - 选中单选按钮时附加

Question

我有一些单选按钮。

<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>

我想做的是，附加 <div class="user">用<a><a/>当该 div 中的单选按钮被选中时。当我选择另一个单选按钮时，我想删除最后插入的 <a><a/>并向新选择的单选按钮的父 div 插入一个新的。

我试过类似的东西，但我无法让它工作:

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

Answer 1

参见 DEMO

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