如何将我的班级从css应用到复选框？

Question

我有这个工作代码，但为什么复选框不影响它？。

$("#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">

任何人都知道这个问题或问题吗？

Answer 1

您的复选框 获取课程（您可以在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">

Answer 2

$("#btn").click(function() {
  if ($("#txt2").val() == 2) {
    alert("Hello");
    $("#txt").removeClass('validation');
    $("#chk").removeClass('border');
  } else {
    $("#txt").addClass('validation');
    $("#chk").addClass('border');
  }
});

.validation {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}
.border {
  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">

1. 使用大纲

Answer 3

实际上你的复选框 获得了课程。使用浏览器检查器查看它。 仅PRIMARY KEY (user_id, project_id)对复选框没有影响。

要显示我更改光标。将鼠标放在复选框上，然后单击按钮并再次将鼠标放在上面。

background-color

$("#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;
  cursor: wait;
}