Javascript jquery-选中单选按钮时追加

我有一些单选按钮

<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中的单选按钮时，在

后面添加一个

。当我选择另一个单选按钮时，我想删除最后插入的

，并在新选择的单选按钮的父div中插入一个新的单选按钮

我尝试过类似的方法，但无法成功：

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

$（'.user'）。单击（函数（）{
如果（！$（“.user radio”）.是（“：选中”））{
$（此）。附加（“”）；
}
})

我更喜欢

显示

和

隐藏

，而不是

附加

和

始终删除

元素。
并使用

change

。

html

<div class="user">
        <input type="radio" class="user-radio" name="user" value="user"/>
        <p>BLABLA</p>
        <a href="javascript:void(0)">blabla</a>        
</div>

css

$('.user').change(function () {
    $("a").hide();
    $("a", this).show();
});

.user a {
    display: none;
}

请参见

$（'.user radio'）。更改（函数（）{
$（'.user a'）.remove（）；
$（'.user-radio:checked'）.parent（）.append（'hello'）；
});​

$（'.user radio'）。单击（函数（）{
$（'.user>a:last child'）.remove（）
如果（$（this）.is（':checked'））{
$（this）.parent（）.append（“
删除！操作符，并将第一个选择器从“.user”.user radio更改，然后将
链接
附加到$（this）元素的父元素：

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

$（'.user radio'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（“.user a”）.remove（）；
$（this.parent（）.append（'dwd'）；
}
});
在这里，我完成了完整的垃圾箱。演示链接如下：

演示：

HTML:

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

.user p{
  display:inline-block;
  marign:0px;

  padding:0px;
}
input{
  padding:0px;
}
.user{
  border:1px solid #f53322;
  color:#333;
  background:#a3f7a2;
}
.user a{
  color:#112288;
  font-weight:bold;
  display:block;
  padding:5px;
}

$(function() {
    $('.user-radio').change(function() {
        if ($(this).is(':checked')) {
            $('.user a').remove();
            $('.user-radio:checked').parent(".user").append("<a href='javascript:void(0);'>Add New Link</a>");
            //Another Alternate way is
            /*  $('.user-radio:checked').closest(".user").append("<a href='javascript:void(0);'>Add New Link</a>"); */
        }
    });
});

JQuery:

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

.user p{
  display:inline-block;
  marign:0px;

  padding:0px;
}
input{
  padding:0px;
}
.user{
  border:1px solid #f53322;
  color:#333;
  background:#a3f7a2;
}
.user a{
  color:#112288;
  font-weight:bold;
  display:block;
  padding:5px;
}

$(function() {
    $('.user-radio').change(function() {
        if ($(this).is(':checked')) {
            $('.user a').remove();
            $('.user-radio:checked').parent(".user").append("<a href='javascript:void(0);'>Add New Link</a>");
            //Another Alternate way is
            /*  $('.user-radio:checked').closest(".user").append("<a href='javascript:void(0);'>Add New Link</a>"); */
        }
    });
});

$（函数（）{
$（'.user radio'）.change（函数（）{
如果（$（this）.is（':checked'））{
$（'.user a'）.remove（）；
$（'.user-radio:checked'）。父项（“.user”）。追加（“”）；
//另一种方法是
/*$（'.user-radio:checked'）。最近（“.user”）。追加（“”）*/
}
});
});

演示：