使用jquery更改复选框的样式

change the style of a checkbox with jquery

本文关键字：样式 复选框 jquery 使用      更新时间：2023-09-26

如果选中复选框，我需要更改它的外观（样式），以便更好地显示在页面上。每个复选框都有一个唯一的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]。这在不使用插件的情况下可能吗？如果是这样的话，有人能告诉我正确的方向吗？

首先，您不需要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>

相关文章：