Snorlax Snorlax - 3 years ago 243
HTML Question

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




Answer Source

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

It's probably also better to add and remove a class instead of styling the lables using .css().

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download