CODEWITHSUNDEEP
javascriptjqueryhtmldom
archvile
archvile

Reputation: 199

jquery - appending when radio button is checked

I have some radio buttons.

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

What I'm trying to do is, appending the <div class="user"> with an <a><a/> when the radio button inside that div is checked. And when i choose another radio button, I want to remove the last inserted <a><a/> and insert a new one to the newly selected radio button's parent div.

I've tried something like this but I couldn't get it to work:

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

Upvotes: 4

Views: 4520

Answers (5)

gaurang171
gaurang171

Reputation: 9080

Here i have done complete bins. Demo link as below:

Demo: 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>"); */
        }
    });
});

Demo: http://codebins.com/bin/4ldqp93

Upvotes: 1

me_digvijay
me_digvijay

Reputation: 5492

remove the ! operator and change the first selector from ".user" .user-radio and then append the <a>link</a> to the parent of $(this) element:

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

Upvotes: 0

Danil Speransky
Danil Speransky

Reputation: 30453

See DEMO

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

Upvotes: 4

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

I prefer to show and hide instead of append and remove elements all time.
And use change instead.

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

Upvotes: 2

Musa
Musa

Reputation: 97672

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

Upvotes: 1

Related Questions