Snorlax February 2016

jQuery: styling and unstyling on click radio button using parent(), next()

I have 3 identical sections. They are the exact same as each other.
What I'm trying to achieve is when I click on the ".rad1"(first radio button), it styles its label.
When I click on ".rad2", it should unstylize the first radio button and stylize second radio button.

I only want it to happen in its own section, aka, when I click on one section, the styles are only applied to that section, no other section.

This is what I have, but I haven't found a way to achieve it:

$('.rad1').click(function() {
    $(this).parent('.label1').css('background', 'red');
});
$('.rad2').click(function() {
    $(this).parent().next('.label1').css('background', 'transparent');
    $(this).parent('.label2').css('background', 'red');
});
.form-section {
background: orange;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
    <form action="">
        <div class="first">
            <label for="radio" class="label1">
                <input type="radio" class="rad1" name="rad">First
            </label>
        </div>
        <div class="second">
            <label for="radio" class="label2">
                <input type="radio" class="rad2" name="rad">Second
            </label>
        </div>
    </form>
</div>
<!------------SECTION-->
<div class="form-section">
    <form action="">
        <div class="first">
            <label for="radio" class="label1">
                <input type="rad        

Answers


j08691 February 2016

I'd do it like this:

$('input[name="rad"]').click(function() {
  $(this).closest('form').find('label').css('background', 'transparent')
  $(this).parent().css('background', 'red');
});

$('input[name="rad"]').click(function() {
  $(this).closest('form').find('label').css('background', 'transparent')
  $(this).parent().css('background', 'red');
});
.form-section {
  background: orange;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
  <form action="">
    <div class="first">
      <label for="radio" class="label1">
        <input type="radio" class="rad1" name="rad">First
      </label>
    </div>
    <div class="second">
      <label for="radio" class="label2">
        <input type="radio" class="rad2" name="rad">Second
      </label>
    </div>

  </form>
</div>
<!------------SECTION-->
<div class="form-section">
  <form action="">
    <div class="first">
      <label for="radio" class="label1">
        <input type="radio" class="rad1" name="rad">First
      </label>
    </div>
    <div class="second">
      <label for="radio" class="label2">
        <input type="radio" class="rad2" name="rad">Second
      </label>
    </div>

  </form>
</div>
<!------------SECTION-->
<div class="form-section">
  <form action="">
    <div class="first">
      <label for="rad 


nAviD February 2016

There are many better approaches but I follow yours :

$('.rad1').click( function() {
    $(this).parent('.label1').css('background', 'red');
    $('.rad2').parent('.label2').css('background', 'transparent');
});
$('.rad2').click( function() {
    $(this).parent('.label2').css('background', 'red');
    $('.rad1').parent('.label1').css('background', 'transparent');
});


Rejith R Krishnan February 2016

$('.rad1').click(function(){ 
   $(this).parent()
     .css('background','red');
});
$('.rad2').click(function(){
   $(this).closest('div')
     .prev().find('.label1')
     .css('background','transparent');
   $(this).parent()
     .css('background','red');
});


Stephen P February 2016

This can also be done without javascript, purely in CSS, if you make a slight change to the structure.

I started by copying j08691's snippet, then commented out the javascript and moved the label for each radio button so it follows rather than encloses the <input>.

Once you have that changed, you can write a CSS selector to target the label if it is the sibling of a :checked radio button. Unchecked buttons will retain their inherited orange background.

/*$('input[name="rad"]').click(function() {
  $(this).closest('form').find('label').css('background', 'transparent')
  $(this).parent().css('background', 'red');
});*/
.form-section {
  background: orange;
  border: 1px solid black;
}
.form-section input[type="radio"]:checked + label {
    background: red;
}
<div class="form-section">
  <form action="">
    <div class="first">
        <input type="radio" class="rad1" name="rad">
        <label for="radio" class="label1">First</label>
    </div>
    <div class="second">
        <input type="radio" class="rad2" name="rad">
        <label for="radio" class="label2">Second</label>
    </div>

  </form>
</div>
<!------------SECTION-->
<div class="form-section">
  <form action="">
    <div class="first">
        <input type="radio" class="rad1" name="rad">
        <label for="radio" class="label1">First</label>
    </div>
    <div class="second">
        <input type="radio" class="rad2" name="rad">
        < 

Post Status

Asked in February 2016
Viewed 2,075 times
Voted 14
Answered 4 times

Search




Leave an answer