jquery - 使用 jQuery 突出显示复选框和单选按钮。

Question

我在突出显示已选择的复选框和单选按钮时遇到一些问题。执行 .css("border", "1px Solid red") 或 .css("background-color", "yellow") 似乎不起作用。

除了默认的复选标记或填充的单选按钮之外，我需要一种方法来通过以某种方式突出显示来识别这些复选框或单选按钮已被单击。

HTML 示例

<input type="radio" title="search" value="T" name="srchType">
<input type="checkbox" value="1" name="option1">

Answer 1

如果您希望保留复选框的浏览器默认外观，则对 css 样式无能为力。非标准复选框外观不是通过边框或背景颜色来实现的，而是通过用代表各种状态的新图形进行批量替换来实现(例如，请参见 here 和 here )。

但是，根据 HTML 的结构，您也许可以使用常规 css 实现令人满意的效果。例如，如果有这样的内容:

<label>
<input id="cb1" name="cb1" type="checkbox" value="1" />
My Checkbox
</label>

您可以应用这样的样式:

$('input:checkbox').click( function(){
   $(this).parent('label').toggleClass('highlight', this.checked);
});

...使用这样的CSS:

label { display: block; }
.highlight { background-color: yellow; }

这是一个示例:http://jsfiddle.net/redler/c3hDK/1/