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中的单选按钮时，将<div class="user">附加<a><a/>。当我选择另一个单选按钮时，我想删除最后插入的<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>');
});

Answer 2

我更喜欢show和hide而不是append和remove元素。
并使用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>

<强> JS

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

<强> CSS

.user a {
    display: none;
}

demo

Answer 3

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

http://jsfiddle.net/s7eRz/

Answer 4

我在这里做了完整的垃圾箱。演示链接如下：

演示： http://codebins.com/bin/4ldqp93

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

<强> CSS：

.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;
}

<强> JQuery的：

$(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>"); */
        }
    });
});

演示： http://codebins.com/bin/4ldqp93

Answer 5

删除！运算符并从“.user” .user-radio 更改第一个选择器，然后将<a>link</a>追加到 $（this）元素：

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

jquery - 选中单选按钮时附加

5 个答案: