使用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">

- KJW

---

你能提供你的HTML代码吗？ - kobe

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

这是一个例子：http://jsfiddle.net/redler/c3hDK/1/。

- Ken Redler