使用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样式进行太多操作.非标准复选框外观不是通过边框或背景颜色实现的,而是使用代表各种状态的新图形进行批量替换(例如,请参见此处和此处).

但是,根据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; }