4

ラジオボタンがいくつかあります。

<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">いるときにを追加することです。そして、別のラジオボタンを選択するときに、最後に挿入されたラジオボタンを削除し、新しく選択されたラジオボタンの親divに新しいラジオボタンを挿入し<a><a/>たいと思います。<a><a/>

私はこのようなことを試しましたが、それを機能させることができませんでした：

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

5 に答える 5

4

デモを見る

$('.user-radio').change(function () {
    $('.user a').remove();
    $('.user-radio:checked').parent().append('<a>hello</a>');
});​
于 2012-08-01T04:10:18.023 に答える
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;
}

デモ

于 2012-08-01T04:10:04.953 に答える
1 
<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/

于 2012-08-01T04:14:47.820 に答える
1

ここで私は完全なビンを作りました。以下のデモリンク：

デモ： 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

于 2012-08-01T05:33:33.513 に答える
0

！を削除します 演算子を使用して、最初のセレクターを「.user」.user-radioから変更し、 $（this）要素<a>link</a>の親にを追加します。

$('.user-radio').click(function () {
    if ($(this).is(':checked')) {
        $(".user a").remove();
        $(this).parent().append('<a>dwd</a>');
    }
});
于 2012-08-01T04:41:48.650 に答える