Add CSS attribute when input is selected via Jquery

Question

I’m Making an answer validation application for a particular question, I need that when the <input type="checkbox"> is selected if an attribute is addedbox-shadow to <textarea> of reply.

What I tried to do in Jquery had no effect on the form.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    if ($("input.correta").is(":checked")) {
      $(this).closest("textarea").css("box-shadow", "1px 1px 10px #0c6f00");
    } else {
      $(this).closest("textarea").css("box-shadow", "none");
    }
  });
</script>

html code

  <div class='form-group respostas' id='resposta1'>
<div class='row form-control'>
  <div class='span8'>
    <textarea style='resize:none' class='span8' rows='3' placeholder="1º Resposta" maxlength='255' id='resposta1'></textarea>
  </div>
</div>
<span class='help-block text-right'>
  <label class='btn btn-success'>
    <input type='checkbox' style='margin-top:0px' class="correta" name='resposta' value='resposta1'> Marcar como Correta
  </label> 
</span></div>

Answer 1

Need to capture the event:

$(document).ready(function() {
    $('input.correta').on('change', function() {
  
  	if ($(this).is(":checked")) {
          $('#resposta1 .span8').css("box-shadow", "1px 1px 10px #0c6f00");
        } else {
          $('#resposta1 .span8').css("box-shadow", "none");
      }
  })
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='form-group respostas' id='resposta1'>
<div class='row form-control'>
  <div class='span8'>
    <textarea style='resize:none' class='span8' rows='3' placeholder="1º Resposta" maxlength='255' id='resposta1'></textarea>
  </div>
</div>
<span class='help-block text-right'>
  <label class='btn btn-success'>
    <input type='checkbox' style='margin-top:0px' class="correta" name='resposta' value='resposta1'> Marcar como Correta
  </label> 
</span></div>

EXAMPLE in jsfiddle

Answer 2

Create a CSS class

.sombra-textarea{    
  box-shadow: 1px 1px 10px #0c6f00
}

And in jquery use addClass and removeClass

$(document).ready(function() {
    if ($("input.correta").is(":checked")) {
      $('#resposta1').addClass("sombra-textarea");
    } else {
      $('#resposta1').removeClass("sombra-textarea");
    }
  });