Add CSS attribute when input is selected via JQuery

Question

Add CSS attribute when input is selected via JQuery

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

I'm doing an answer validation application for a given question, I need to add a <input type="checkbox"> to box-shadow attribute of the answer when <textarea> is selected.

What I tried to do in JQuery did not have an 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>

html jquery css

asked by anonymous 29.06.2016 / 14:46

2 answers

0

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");
    }
  });

29.06.2016 / 14:53

Error returning HashMap for JavaScript JavaScript - Execute Data from an array always in the same order

score 2 · Accepted Answer

You 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><divclass='form-grouprespostas'id='resposta1'><divclass='rowform-control'><divclass='span8'><textareastyle='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