用 jquery 改变复选框的样式答案

【问题标题】：change the style of a checkbox with jquery用 jquery 改变复选框的样式
【发布时间】：2014-12-12 03:35:42
【问题描述】：

如果复选框被选中，我需要更改它的外观（样式），以便它更好地显示在页面上。每个复选框都有一个唯一的 ID，该 ID 在填充表格时使用 ajax 生成。我可以使用以下代码在同一张表中列出价格字段：

function hiLight() {
$('#guides td.price').each(function() { 
     if ( $(this).html()!= '')
    {
        $(this).css('border', '3px solid red');
     }
});

并尝试使用复选框的修改部分：

$('#guides :checkbox').each(function() {
    if ($(this).is(':checked')) { 
        $(this).css('border', '3px solid red');
    }
 });
}//END OF HILIGHT FUNCTION

我知道它正在进入复选框功能，因为我使用了警报来查看它是否是。我认为是$(this) 导致它不知道要格式化什么，因为在警报中我使用了 alert($(this)) 并返回[object] [object] 这是否可能不使用插件？如果是这样，有人可以指出我正确的方向

【问题讨论】：

为什么不用纯 CSS 来做呢？
我不希望每个复选框（页面上大约有 30 多个）都被突出显示，只是选中的那些。
你可以在 CSS 中做什么：#guides input[type="checkbox"]:checked { outline: 3px solid red; }
好的，我该怎么做？并且每次选中一个框时都需要更改。这就是为什么我使用 jquery 来做到这一点。
我试过你的想法，对我没用。

标签： javascript jquery html ajax checkbox

【解决方案1】：

首先，您不需要 JavaScript 来设置输入样式。其次，复选框没有边框，但可以使用轮廓。

#guides input[type="checkbox"]:checked {
  outline: 3px solid red;
}

<div id="guides">
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

【讨论】：

我不知道我必须使用大纲。这就是诀窍。谢谢。