Javascript 自定义HTML复选框标签

我有一个自定义的复选框，它是从Codepen抓取的

当页面加载时，复选框几乎处于选中状态，并且框中没有可用的文本

当用户取消选中复选框时，将显示其标签的值：

我要做的是在复选框中显示自定义消息，如“单击我以确认联系人”。当用户取消选中复选框时，它可以正常工作，显示已联系的联系人

我尝试过jQuery，但它不起作用。谁能给我一个有效的解决方案？我期待这样的事情：

谢谢

.inputGroup{
背景色：#fff；
边界半径：25px；
}
.输入组标签{
填充：12px 30px；
宽度：100%；
显示：块；
文本对齐：左对齐；
颜色：#3C454C；
光标：指针；
位置：相对位置；
z指数：2；
过渡：颜色200ms，易于调整；
溢出：隐藏；
边框：2倍纯绿；
边界半径：25px；
高度：40px；
}
.inputGroup标签：在{
宽度：32px；
高度：32px；
内容：''；
边框：2px实心#D1D7DC；
背景色：#fff；
背景图像：url（“数据：image/svg+xml，%3Csvg width='32'height='32'viewBox='0 0 32'xmlns='3http://www.w3.org/2000/svg“%3E%3Cpath d=”M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z'填充=“%23fff”填充规则='非零'/%3E%3C/svg%3E”）；
背景重复：无重复；
背景位置：2px 3px；
边界半径：50%；
z指数：2；
位置：绝对位置；
右：30px；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
光标：指针；
过渡：所有200毫秒的速度都很慢；
背景颜色：绿色；
}
.inputGroup输入：选中~标签{
颜色：#fff；
高度：40px；
边界半径：25px；
边框：2px实心#5562eb；
}
.inputGroup输入：选中~标签：之前{
-webkit转换：翻译（-50%，-50%）scale3d（56,56,1）；
转换：转换（-50%，-50%）缩放3D（56,56,1）；
不透明度：1；
背景色：白色；
}
.输入组输入{
宽度：32px；
高度：32px；
顺序：1；
z指数：2；
位置：绝对位置；
右：30px；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
光标：指针；
可见性：隐藏；
边界半径：25px；
}

联络

我真的不明白为什么您希望始终选中复选框（正如我在HTML中看到的那样），但这里有一个更改标签上文本的解决方案。使用

：在

伪元素之后

如果这不是你要找的。请在评论中告诉我

.inputGroup{
背景色：#fff；
边界半径：25px；
位置：相对位置；
}
.输入组标签{
填充：12px 30px；
宽度：100%；
显示：块；
文本对齐：左对齐；
颜色：#3C454C；
光标：指针；
位置：相对位置；
z指数：2；
过渡：颜色200ms，易于调整；
溢出：隐藏；
边框：2倍纯绿；
边界半径：25px；
高度：40px；
框大小：边框框；
}
.inputGroup标签：在{
宽度：32px；
高度：32px；
内容：''；
边框：2px实心#D1D7DC；
背景色：#fff；
背景图像：url（“数据：image/svg+xml，%3Csvg width='32'height='32'viewBox='0 0 32'xmlns='3http://www.w3.org/2000/svg“%3E%3Cpath d=”M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z'填充=“%23fff”填充规则='非零'/%3E%3C/svg%3E”）；
背景重复：无重复；
背景位置：2px 3px；
边界半径：50%；
z指数：2；
位置：绝对位置；
右：30px；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
光标：指针；
过渡：所有200毫秒的速度都很慢；
背景颜色：绿色；
}
.inputGroup标签：在{
内容：“已联系”；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
z指数：2；
左：15px；
}
.inputGroup输入：选中~标签：之后{
内容：“点击我确认”；
}
.inputGroup输入：选中~标签{
高度：40px；
边界半径：25px；
边框：2px实心#5562eb；
}
.inputGroup输入：选中~标签：之前{
-webkit转换：翻译（-50%，-50%）scale3d（56,56,1）；
转换：转换（-50%，-50%）缩放3D（56,56,1）；
不透明度：1；
背景色：白色；
}
.输入组输入{
宽度：32px；
高度：32px；
顺序：1；
z指数：2；
位置：绝对位置；
右：30px；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
光标：指针；
可见性：隐藏；
边界半径：25px；
}

---

下面是一个使用JavaScript替换标签值的解决方案。我遇到的一个问题是，标签上有一个白色的文本，我必须删除它才能显示标签

input=document.getElementById（'radio1'）；
label=document.getElementById（'radio01'）；
函数handleClick（）{
（input.checked？label.innerText=“单击我确认联系人”：label.innerText=“已联系”）；
}
input.addEventListener（'click'，handleClick）
.inputGroup{
背景色：#fff；
边界半径：25px；
}
#帕拉{
z指数：999；
}
.输入组标签{
填充：12px 30px；
最大宽度：100%；
显示：块；
文本对齐：左对齐；
颜色：#3C454C；
光标：指针；
位置：相对位置；
z指数：2；
过渡：颜色200ms，易于调整；
溢出：隐藏；
边框：2倍纯绿；
边界半径：25px；
高度：40px；
}
.inputGroup标签：在{
宽度：32px；
高度：32px；
内容：''；
边框：2px实心#D1D7DC；
背景色：#fff；
背景图像：url（“数据：image/svg+xml，%3Csvg width='32'height='32'viewBox='0 0 32'xmlns='3http://www.w3.org/2000/svg“%3E%3Cpath d=”M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z'填充=“%23fff”填充规则='非零'/%3E%3C/svg%3E”）；
背景重复：无重复；
背景位置：2px 3px；
边界半径：50%；
z指数：2；
位置：绝对位置；
右：30px；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；