如何在选中时使用JQuery突出显示复选框

Question

我正在尝试使用JQuery突出显示用户选中的复选框，
当用户取消选中这些检查线时，它们将不被突出显示。

但是如何才能实现这种效果？

Answer 1

样式复选框在每个浏览器中都有所不同...... take a look

所以我的建议是：

1. 带有span的复选框。
2. 然后给出一个像2px或1px的填充。
3. 然后选中一个复选框时，为其跨度指定一个类似红色背景的样式。

Answer 2

不确定“亮点”是什么意思，但这里有：

$(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

之前我没有使用过jQueryUI Effect（）方法，但它有一个'highlight'方法。

所以我会尝试这些方法。

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

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