Javascript 已选中的上的包装复选框。不起作用

我有以下代码片段。为什么

.is（）

不能仅包装选中的复选框

$（“输入：复选框”）。打开（“更改”，函数（）{
$（“输入：复选框”）.is（“：checked”）.wrap（“”）；
});
.red{
背景：红色；
}

.is（）
返回一个布尔值，因此它不可链接。您需要
.has（）

现在的问题是，如果用户取消选中它，它仍然将被包装，如果他们再次检查它，您将有多个包装元素。您可能应该只包装元素以启动并切换父元素上的类


$（“输入：复选框”）。打开（“更改”，函数（）{
$（this.closest（“label”）.toggleClass（“选中”，this.checked）；
}).触发（“变更”）
label.checked{
背景：绿色；
}


在事件处理程序中使用
$（this）
检查复选框是否已选中
is
返回布尔结果，如果选中复选框，则在
中使用
is（）
，然后将其包装


$（“输入：复选框”）。打开（“更改”，函数（）{
var$this=$（this）；
如果（$this.is（“：checked”））
$this.wrap（“”）；
});
.red{
背景：红色；
}

阅读以下文件：

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

因此，
的返回值是一个布尔值。但您正在尝试对其调用jQuery方法

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

包装器以div开头，以span结尾。我可能想保持一致

我怀疑
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();
  }
});


检查控制台，思考错误，获取jQuery API文档并检查您正在使用的函数是否有特定问题？仅仅发布代码并不能让你得到答案。你的问题是什么？有错误吗？很抱歉，我键入了一个段落，但我不确定为什么没有。最好是将$（此）存储在变量中，而不是选择两次。@taxicala是的，因为它被多次使用，缓存将提高性能，UpdateGood在取消选中+1时考虑展开
$("input:checkbox").on("change", function() {
  if (this.checked) {
    $(this).wrap("<span class='check-wrap-span'></span>");
  } else {
    $(this).unwrap();
  }
});