title: jquery / html add class on radio button check, else remove class if radio button not checked?
body: <p>I have two radio buttons, with the same name group 'select' </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="select_box_outer"&gt;
  &lt;span class="select_box"&gt;
  &lt;input type="radio" id="select" name="select" value="same"&gt;
  &lt;div class="checkbox_tick"&gt;&lt;/div&gt;
  &lt;div class="checkbox_tick2"&gt;&lt;/div&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;div class="select_box_outer"&gt;
  &lt;span class="select_box"&gt;
  &lt;input type="radio" id="select" name="select" value="same"&gt;
  &lt;div class="checkbox_tick"&gt;&lt;/div&gt;
  &lt;div class="checkbox_tick2"&gt;&lt;/div&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The options here are 'Yes' or 'No'</p>
  
  <p>if a user checks one of the radio buttons then I want the parent div 'select_box_outer' to have a class added 'select_box_outer2' which basically changes the css of my div background colour the border and adds a shadow to the div 'select_box_outer'.</p>
  
  <p>Then if the radio button is de-checked then it should remove the class and go back to the original css settings for 'select_box_outer'.</p>
  
  <p>I also have 'checkbox_tick' displayed when a radio button is not checked, this appears as a greyed out tick. But If the radio button is checked then 'checkbox_tick' css should be display none and my div 'checkbox_tick2' should be displayed as block. But if the radio button is then de-checked then it should switch back to 'checkbox_tick'.</p>
  
  <p>I am struggling to get to grips with what I would need to do here, please can someone show me where I am going wrong? Thanks in advance:</p>
  
  <p>JQUERY:</p>
  
  <pre><code>&lt;script&gt;
  jQuery(function(){
          jQuery("input[name=select]").change(function(){          
  
  
              if ($(this).val() === "Yes") {
              $(this).parents('div.select_box_outer').addClass( "select_box_outer2" );
  $('div.checkbox_tick').css('display', 'none');
              }
              else {
              $(this).parents('div.select_box_outer').removeClass( "select_box_outer2" );
  $('div.checkbox_tick2').css('display', 'block');
              }                                                            
         });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.select_box_outer{
      width:150px;
      height:130px;
      border: 1px solid #999;
      background: #eee;
      box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.4);
      -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
  -webkit-border-radius: 5px;
  -moz-border-bradius: 5px;
  border-radius: 5px;
  cursor:pointer;
  cursosr:hand;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  display:inline-block;
  margin-right:50px;
  }
  
  .select_box_outer2 {
      background: #FFB631; /* Or some other color */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  }
  
  .checkbox_tick{
   height:55px;
  width:100%;
  background-image: url('../images/tick.png');
  background-repeat:no-repeat;
  background-position: center;
  background-size:35px 35px;
  position:relative;
  display:none;
  margin:auto;
  
  }
  
  .checkbox_tick2{
   height:55px;
  width:100%;
  background-image: url('../images/tick.png');
  background-repeat:no-repeat;
  background-position: center;
  background-size:35px 35px;
  position:relative;
  margin:auto;
  filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  }
  </code></pre>