javascript - 如何将我的类从 css 应用到复选框?

标签 javascript jquery css

<分区>

我有这个工作代码,但为什么复选框没有影响它?

$("#btn").click(function() {
  if ($("#txt2").val() == 2) {
    alert("Hello");
    $("#txt").removeClass('validation');
    $("#chk").removeClass('validation');
  } else {
    $("#txt").addClass('validation');
    $("#chk").addClass('validation');
  }
});
.validation {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <input type="checkbox" id="chk">
    <input type="text" id="txt">
  </td>
</tr>
<input type="text" id="txt2">
<input type="button" id="btn" value="Click">

有人知道这个问题吗?

最佳答案

您的复选框正在获得类(您可以在 DOM 检查器中判断);您看不到样式,因为未显示复选框边框。

this question的一些答案建议对复选框使用 outline 而不是 border;请参阅下面示例中的新样式规则。

$("#btn").click(function() {
  if ($("#txt2").val() == 2) {
    alert("Hello");
    $("#txt").removeClass('validation');
    $("#chk").removeClass('validation');
  } else {
    $("#txt").addClass('validation');
    $("#chk").addClass('validation');
  }
});
.validation {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}
input[type=checkbox].validation {
  outline: 1px solid #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <input type="checkbox" id="chk">
    <input type="text" id="txt">
  </td>
</tr>
<input type="text" id="txt2">
<input type="button" id="btn" value="Click">

关于javascript - 如何将我的类从 css 应用到复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40170764/

相关文章:

javascript - iframe contentWindow 即使在 .load 函数之后仍未定义

javascript - 如果没有选中复选框,则禁用按钮 jquery

javascript - 包装器不随内容扩展

javascript - 使用D3js创建数据库E-R图

javascript - 带有 JSON 数据的动态图表 - CanvasJS

jquery - 文本框中仅允许半角片假名(日语)字符

javascript - 如何在 Jquery 文档就绪函数中触发复选框单击事件?

jquery - 获取 405 method not allowed 异常

css - 如何在悬停时定位前一个 sibling ?

javascript - AngularJS 根据宽度动态改变高度