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

2023年9月13日 273次阅读

我需要摆脱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,它将圆角边框放在封闭的表格单元格周围,我想保留：

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

最后,从Chrome DevTools中看到的CheckBoxList的.aspx呈现的HTML看起来像这样(为简洁起见,编辑了一点)：

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

最佳答案 问题不在于输入,而在于它的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-top-left-radius：5px; border-top-right -radius：5px; border-bottom-left-radius：5px; border-bottom-right-radius：5px;“.或者只是像这样创建一个新的CSS类

.no-borders {
    border:0;
}

并将其应用于您不希望看到的每个td.

jQuery的方式

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