CODEWITHSUNDEEP
jqueryhtml
Sujay sreedhar
Sujay sreedhar

Reputation: 3518

How to select parent element of a tag

I want to add green_bg class when a radio is selected on the parent div

<div class="content red_bg">       
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">    
</div>
<div class="content  red_bg">
<input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
</div>
<div class="content  red_bg">
<input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
</div>

and my jquery

$(document).ready(function() {
    $('input[type="radio"]').click(function() { 
        $(".content").removeClass("red_bg").addClass("green_bg");
            });

});

But when i select a radio, all the background turns green Please help me out.

Upvotes: 0

Views: 41

Answers (2)

Mohd. Shaukat Ali
Mohd. Shaukat Ali

Reputation: 752

Try this..

$(document).ready(function() {
    $('input[type="radio"]').click(function() { 
        $(this).parent().removeClass("red_bg").addClass("green_bg");
    });
});

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36458

Select just the parent .content of the clicked button:

$('input[type="radio"]').click(function() { 
  $(this).closest(".content").removeClass("red_bg").addClass("green_bg");
});

or, if you also want to reset all of the others:

$('input[type="radio"]').click(function() { 
  $('.content').addClass('red_bg').removeClass('green_bg');
  $(this).closest(".content").removeClass("red_bg").addClass("green_bg");
});

Example: 

$('input[type="radio"]').click(function() { 
  $('.content').addClass('red_bg').removeClass('green_bg');
  $(this).closest(".content").removeClass("red_bg").addClass("green_bg");
});
.green_bg {
  background-color: green;
 }

.red_bg {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content red_bg">       
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">    
</div>
<div class="content  red_bg">
<input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
</div>
<div class="content  red_bg">
<input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
    <input type="radio" name="answerkey" id="ankeya2" value="option2">
</div>

Upvotes: 3

Related Questions