选中单选按钮时追加

appending when radio button is checked

本文关键字：追加 单选按钮      更新时间：2024-06-24

我有一些单选按钮。

<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/>，并将一个新的插入到新选择的单选按钮的父分区。

我试过这样的东西，但我无法让它发挥作用：

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

参见演示

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

我一直喜欢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;
}

演示

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

这里我已经完成了完整的bin。演示链接如下：

演示：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

删除运算符，并将第一个选择器从".user"更改为".user radio"，然后将<a>link</a>附加到$（this）元素的父元素：

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