How to use JQuery to highlight a checkobx when it is checked

Question

Hi all,

I am trying to use JQuery to highlight the checkboxes checked by a user,
and when they will be un-highlighted when the user unchecked those checkoxes.

But how is it possible to do this effect?

Answer 1

I've not used the jQueryUI Effect() method before, but it has a 'highlight' method.

So I would try something along these lines.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;&lt;/script&gt;

$('#mycheck:checked').effect('highlight');

Answer 2

Not sure what you mean by "highlight", but here goes:

$(document).ready(function() {
  $("#checkboxID").change(function() {
    if ($(this).attr("checked")) {
      //checkbox has been checked
      $(this).css("border", "1px solid #ff0000");
    }
    else {
      //unchecked
      $(this).css("border", "0");
    }
  });
});

Answer 3

styling checkbox differs in every browsers... take a look

so my suggestion would be:

1. wrap checkbox with span.
2. then give span a padding like 2px or 1px.
3. then when a checkbox is checked, give its span a style like red background.