jquery - 如何使用 jQuery 在 ASP.Net CheckBoxList 控件中隐藏复选框周围的边框？

Question

我需要去除由 CheckBox 控件呈现的各个复选框周围的边框。这是它现在的样子:

ASP.Net 标记很简单:

<asp:CheckBoxList ID="cblEthnicity" runat="server" RepeatDirection="Vertical"
  RepeatColumns="3" RepeatLayout="Table" BorderStyle="None" BorderWidth="0">
</asp:CheckBoxList>

它位于应用了 formTable 类的表格的单元格中(见下文)。

如您所见，我已尝试将属性 BorderStyle="None" 和 BorderWidth="0" 设置为无效。

我很确定这背后的是以下 CSS，它在我想要保留的封闭表格单元格周围放置了圆 Angular 边框:

.formTable
{
  background-color: #eeeeee;
  border: solid 1px #bbbbbb;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}
.formTable tr, .formTable tr td, .formTable tr th
{
  background-color: #eeeeee;
  padding: 3px;
  border: solid 1px #bbbbbb;
  vertical-align: top;
}

我添加了以下 CSS，它也什么也没做:

.formTable tr td input[type="checkbox"]
{
  border: none;
}

最后，从 CheckBoxList 的 .aspx 呈现的 HTML，如 Chrome DevTools 中所见，看起来像这样(为简洁起见进行了一些编辑):

<table id="main_cblEthnicity" style="border-width:0px; border-style:None; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
  <tbody>
    <tr>
      <td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
        <input id="main_cblEthnicity_0" type="checkbox" name="ctl00$main$cblEthnicity$0"
          checked="checked" value="Native American" />
        <label for="main_cblEthnicity_0">Native American</label>
      </td>
      ...
    </tr>
  </tbody>
</table>

关于如何去除不需要的边框有什么建议吗？

更新:这里有一些图片可以更清楚地说明正在发生的事情以及我正在努力完成的事情:

这就是我现在得到的:

如果我使用到目前为止提出的任何一个建议，我会得到以下结果:

这就是我要实现的目标:

除了此处提出的建议外，我还尝试将此添加到 CSS，但没有任何区别:

.formTable tr td > input[type="checkbox"] {
  border: none;
}

我也在 Javascript/jQuery 中尝试过这个:

<script type="text/javascript">
  $(document).ready(function() {
    $('.formTable tr td > input[type="checkbox"]').removeAttr("border");
  });
</script>

Answer 1

问题不在于input，而在于td。看:

<td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">

此处(上图)定义了边界半径。这里(下方)边框颜色:

.formTable tr, .formTable tr td, .formTable tr th
{
    background-color: #eeeeee;
    padding: 3px;
    border: solid 1px #bbbbbb;
    vertical-align: top;
}

因此，要更改此设置，您可能需要在上面的 CSS 代码之后添加:

.formTable tr td
{
    border:0;
}

这样做，您只会使 td 边框消失，而不是 tr 或 th

的边框消失

OP 澄清后更新

哦，好的。现在有了这些新的屏幕截图，我们可以清楚地看到您正在努力实现的目标。无论如何，您仍在尝试从输入中删除边框，但我重复一遍，问题不是输入而是 td。

我会用您给我们的代码向您解释，好吗？所以:

<table id="main_cblEthnicity" style="border-width:0px; border-style:None; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
  <tbody>
    <tr>
      <td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
        <input id="main_cblEthnicity_0" type="checkbox" name="ctl00$main$cblEthnicity$0"
          checked="checked" value="Native American" />
        <label for="main_cblEthnicity_0">Native American</label>
      </td>
      ...
    </tr>
  </tbody>
</table>

这是 包含所有这些复选框 的表格的 HTML 代码。所有的 TD 都有圆形边框和我们已经知道的东西。这个包含所有这些复选框的表格位于一个更大的 TD(您想要保留的边界)内，在以下情况下:

所以现在您有两种方法可以在不更改所有 HTML 的情况下执行操作:CSS 或 jQuery。

CSS方式

非常简单，您可能希望在那些表格单元格(内部有复选框)中放置内联样式，如下所示:style="border:0" 而不是 style="border-左上角半径:5 像素；右上角边框半径:5 像素；左下角半径:5 像素；右下角半径:5 像素；”。或者像这样创建一个新的 CSS 类

.no-borders {
    border:0;
}

并将其应用于您不想看到的每个 td。

jQuery 方式

<script type="text/javascript">
  $(document).ready(function() {
    $('.formTable input[type="checkbox"]').parent().css('border','none');
  });
</script>