When button checked change background color of containing div

JavaScript
1 
<script>
$('.radio-btn').click(function() {
    if( $(this).is(':checked')) {
      $document.getElementsByClassName("row").addClass("hvr");
    }
}); 
</script>

.hvr {
	background-color: #f2f2f2;
}

<div class="row"><input type="radio" class="radio-btn" name="payment-options"  /></div>

When I click on the radio button I want the background color of the containing div to change. What I have here isn’t working. Can anybody help?

2
3

The javascript didn’t show up. Here it is:

  <script>
     $('.radio-btn').click(function() {
        if( $(this).is(':checked')) {
          $document.getElementsByClassName("row").addClass("hvr");
        }
   }); 
   </script>
4

you have to tell disqus that it is supposed to be in a code section, see the </> button.

the solution is given in the other forum you posted in.

5

This works but there’s still a problem:

    <script>
      $('.radio-btn').click(function() {
          if( $(this).is(':checked')) {
     $('.row').addClass("hvr");
    }
}); 
</script>

I have several divs with the class of row and I only want the one containing the checked radio button to have a different background color.

6

the solution is given in the other forum you posted in.

1 Like
7

This works but there’s still a problem:

$('.radio-btn').click(function() {
     $(this).filter(':checked').closest('.row').addClass("hvr");
});

If the user changes his mind and clicks on a different radio button then it has to be highlighted as well. The way it works now it leaves the previously checked button’s div highlighted and then highlights the next one as well.

8

the solution is given in the other forum you posted in.

1 Like
9

This is the right code:

$('.radio-btn').click(function() {
		$(this).filter(':checked').closest('.row').addClass("hvr");

});

But there’s still the problem that the previously highlighted div remains highlighted when the next radio button is clicked.

10

that code is no different from the previous version.

11

Remove all .hvr classes and then just add the single one to the current element.

e.g.

$('.radio-btn').click(function() {
$('.row').removeClass("hvr");
$(this).filter(':checked').closest('.row').addClass("hvr");

});

Assuming you will only ever have one class of .hvr active.

12

Thank you! That worked.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.