0

I am trying to figure out (after lots of searching) how to make a div change colors after a radio button inside of it is selected. The scenario is I want two divs side by side that essentially say "choose this plan" and below the divs would be a continue signing up button. So when someone clicks the radio button (selecting a membership plan) in one of the divs it will change the styling of that div to have a new background color and text color. I cannot figure out how to make this work.

Any suggestions would be greatly appreciated!

HellaDev
  • 410
  • 8
  • 22

2 Answers2

0
$( 'input[type=radio]' ).on( 'click', function(){

    var value = $(this).val();

    // now based on value, we do different things to our div...
    // example:
    switch ( value ){
        case 1:
            myDiv.css( 'background-color', 'red' );
            break;
        // next case, and so on....
    }

} );
Sorin C
  • 874
  • 9
  • 8
0

Try the following code

$('.divSpecific input').click(function(){
   
    if($(this).attr("alt") == "1")
            $('div.signUp').css("background","red")
            .css("color","black");
    else
        $('div.signUp').css("background","cyan")
          .css("color","white");
   
  });
div.divSpecific {
    height: 20px;
    width: 200px;
    float:left;
 }
.signUp{
   border:solid 1px;
    height:20px;
    width:100px;
   text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="divSpecific">
    Choose this plan &nbsp;&nbsp;&nbsp;
  <input type="radio" alt="1" name="name" />
  </div>

<div class="divSpecific">
    Choose this plan &nbsp;&nbsp;&nbsp;
    <input type="radio" alt="2" name="name" />
  </div>
<br/>
<div class="signUp">
    Sign Up
</div>
dom
  • 986
  • 8
  • 23