13 Replies - 760 Views - Last Post: 03 June 2016 - 08:30 AM

#1 makamo66   User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 92
  • Joined: 04-February 09

When button checked change background color of containing div.

Posted 03 June 2016 - 06:52 AM

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

:code:

This post has been edited by Dormilich: 03 June 2016 - 06:53 AM


Is This A Good Question/Topic? 0
  • +

Replies To: When button checked change background color of containing div.

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 06:54 AM

check your browser's error console. the problem is listed there.
Was This Post Helpful? 0
  • +
  • -

#3 makamo66   User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 92
  • Joined: 04-February 09

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 07:39 AM

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.

:code:

This post has been edited by Dormilich: 03 June 2016 - 07:45 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 07:47 AM

$(this).filter(':checked').closest('.row').addClass("hvr");

Was This Post Helpful? 0
  • +
  • -

#5 makamo66   User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 92
  • Joined: 04-February 09

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 07:49 AM

That worked! Thank you so much.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 07:54 AM

don't forget to remove the superfluous if() statement.
Was This Post Helpful? 0
  • +
  • -

#7 makamo66   User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 92
  • Joined: 04-February 09

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 08:05 AM

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.
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 08:09 AM

before you assign the class to the current element remove the class from all other elements.
Was This Post Helpful? 0
  • +
  • -

#9 makamo66   User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 92
  • Joined: 04-February 09

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 08:14 AM

I don't know how to do that. My javascript skills are very weak.
Was This Post Helpful? 0
  • +
  • -

#10 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 08:16 AM

how do you—in general—remove a class from an element?
Was This Post Helpful? 0
  • +
  • -

#11 makamo66   User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 92
  • Joined: 04-February 09

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 08:24 AM

$(this).removeClass("hvr");
Was This Post Helpful? 0
  • +
  • -

#12 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 08:26 AM

and how do you remove a class from a set of elements?
Was This Post Helpful? 0
  • +
  • -

#13 makamo66   User is offline

  • D.I.C Head

Reputation: -6
  • View blog
  • Posts: 92
  • Joined: 04-February 09

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 08:29 AM

This works now. Problems solved!

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


:code:

This post has been edited by Dormilich: 03 June 2016 - 08:30 AM

Was This Post Helpful? 0
  • +
  • -

#14 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4202
  • View blog
  • Posts: 13,275
  • Joined: 08-June 10

Re: When button checked change background color of containing div.

Posted 03 June 2016 - 08:30 AM

thanks to PaulOB.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1