Jquery 将复选框替换为跨度元素

我试图通过使用带边框的span和使用css显示属性隐藏复选框来设置复选框的样式。当我运行上面的代码片段时，它似乎不起作用。我试着换成

，但也没用。我希望单击后跨度保持红色。我如何使用css实现它？这是我的JSFIDLE链接

编辑1：

我想用span替换复选框。我的意思是我需要使用span的相同行为。当我单击span时，span颜色应变为红色，当我再次单击时，它应变为正常样式，就像选中和取消选中复选框一样

input[type=“checkbox”]+span:悬停{
边框：1px纯红；
颜色：红色；
}
输入[type=“checkbox”]：选中+span{
边框：1px纯红；
颜色：红色；
}
输入[type=“checkbox”]{
显示：无；
}
跨度{
显示：内联块；
线高：38px；
字体大小：14px；
颜色：#acacac；
边框：1px实心#acacac；
左侧填充：20px；
右边填充：20px；
垫顶：2件；
}

立领

单击span标记时，您的复选框未被选中。从复选框中删除显示：无，你就会明白我的意思。单击span元素时，需要javascript选中复选框。

input[type=“checkbox”]+span:悬停{
边框：1px纯红；
颜色：红色；
}
输入[type=“checkbox”]：选中+span{
边框：1px纯红；
颜色：红色；
}
输入[type=“checkbox”]{
可见性：隐藏；
}
跨度{
显示：内联块；
线高：38px；
字体大小：14px；
颜色：#acacac；
边框：1px实心#acacac；
左侧填充：20px；
右边填充：20px；
垫顶：2件；
}

立领
3/4袖
全袖


无袖物品
作物顶部
薄衣服

我不明白这里复选框的作用是什么。 但从你的问题中我了解到你想要一个像复选框一样的跨度。 检查下面的代码段

$（'.checkbox_span'）。单击（函数（）{
$（this.toggleClass（'check'）；
})

input[type=“checkbox”]+span:悬停{
边框：1px纯红；
颜色：红色；
}
.检查{
边框：1px纯红；
颜色：红色；
}
输入[type=“checkbox”]{
显示：无；
}
跨度{
显示：内联块；
线高：38px；
字体大小：14px；
颜色：#acacac；
边框：1px实心#acacac；
左侧填充：20px；
右边填充：20px；
垫顶：2件；
}

立领

您希望实现的具体目标是什么？是否要单击该框并使其保持红色？如果您的复选框被隐藏，它将不会触发：checked事件，因为“否”单击将在其上注册。是。我想让它保持redIs的状态，不使用jquery的解决方案？因为我使用css对单选按钮做了同样的处理，但似乎对复选框不起作用。我不想要复选框，只需要span元素来代替那些复选框检查我的答案。我想这就是你要找的。好吧，display：没有一个也适用于它。我的问题是，我有相同的标签名称。无论如何，谢谢你的回答。它可以工作哦，是的，它应该可以与显示器一起工作：没有。我没想过。很好解决了你的问题。嘿@GokuFrieza，如果它解决了你的问题，你能接受这个答案吗？