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

Answer 2

请点击此链接，它包含所有信息

Answer 3