Question

请你看一下这个片段，让我知道.is()是不是只打包了选中的复选框？

＆＃13;

$("input:checkbox").on("change", function() {
  $("input:checkbox").is(":checked").wrap("<span class='check-wrap-sapn'></div>");
});

＆＃13;

.red {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

＆＃13;

Answer 1

.is()返回一个布尔值，因此它不可链接。你想要.has()

现在你遇到的问题是，如果用户取消选中它，它仍将被包装，如果再次检查它，你将拥有多个包装元素。您可能应该只是将元素包装起来并在父元素上切换类。

＆＃13;

$("input:checkbox").on("change", function() {
  $(this).closest("label").toggleClass("checked", this.checked);
}).trigger("change");

＆＃13;

label.checked {
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="checkbox">
</label>
<label>
  <input type="checkbox">
</label>
<label>
  <input type="checkbox">
</label>

＆＃13;

Answer 2

阅读.is的文档：

针对选择器，元素或jQuery对象检查当前匹配的元素集，如果这些元素中至少有一个与给定的参数匹配，则返回true。

因此.is的返回值是布尔值。但是你试图在它上面调用jQuery方法。

此外，您在事件处理程序中重复了DOM查询，因此将对所有匹配元素执行操作，而不仅仅是与事件相关的元素。

你的包装器以div开始，但以跨度结束。可能希望对此保持一致。

我怀疑check-wrap-sapn原本应该是check-wrap-span。

如果我正确地猜测你的目标，那么：

$("input:checkbox").on("change", function()  {
  var $this = $(this);
  if ($this.is(":checked")) {
    $this.wrap("<span class='check-wrap-span'></span>");
  } else {
    $this.unwrap();
  }
});

或者：

$("input:checkbox").on("change", function() {
  if (this.checked) {
    $(this).wrap("<span class='check-wrap-span'></span>");
  } else {
    $(this).unwrap();
  }
});

直播示例：

＆＃13;

$("input:checkbox").on("change", function() {
  if (this.checked) {
    $(this).wrap("<span class='check-wrap-span'></span>");
  } else {
    $(this).unwrap();
  }
});

＆＃13;

.check-wrap-span {
  border: 1px solid green;
}

＆＃13;

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

但是，通过:checked伪类对CSS进行样式处理可以更好地处理这个问题，只要有问题的样式可以应用于复选框。如果它不能，我主张总是拥有包装器跨度，但在其上切换一个类：

直播示例：

＆＃13;

$("input:checkbox").on("change", function() {
  $(this.parentNode).toggleClass("check-wrap-span", this.checked);
});

＆＃13;

.check-wrap-span {
  border: 1px solid green;
}

＆＃13;

<span><input type="checkbox"></span>
<span><input type="checkbox"></span>
<span><input type="checkbox"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 3

在事件处理程序中使用$(this)来检查是否选中了复选框
is返回布尔结果，在is()中使用if，如果选中该复选框，则将其换行。

＆＃13;

$("input:checkbox").on("change", function() {
  var $this = $(this);

  if ($this.is(":checked"))
    $this.wrap("<span class='red'></div>");
});

＆＃13;

.red {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

＆＃13;

包含检查的复选框.is（）无法正常工作

3 个答案: