Javascript 在复选框上使用jQuery.fadeOut（）

我的HTML-

<input id="skipOnClick" type="checkbox">-   Skip song when notification is clicked?</input>

---

然后，当我运行这个jQuery$'skipOnClick'.fadeOut；，只有复选框会淡出，文本不会随之淡出。是否有一种方法可以使复选框和文本都褪色，或者我必须使用另一个HTML元素来放入文本并使复选框和元素都褪色？

在发布问题之前，我做了一些实验，发现通过将所有HTML放在div标记内，然后使用$'skipHolder'。fadeOut；解决了这个问题

HTML-

<div id="skipHolder">
<input id="skipOnClick" type="checkbox">-   Skip song when notification is clicked?</input>
</div>

---

输入元素中不能包含文本，因此需要将文本和输入像标签一样包装到另一个元素中，然后像标签一样隐藏它

<label for="skipOnClick" id="lblSkipOnClick">
    <input id="skipOnClick" type="checkbox">-   Skip song when notification is clicked?
</label>

---

把你的复选框放在李里面

HTML

---

checkpox标记内不能有文本内容。相反，为其贴上标签，然后将两种颜色都褪色：

HTML

---

这不是一个准确的答案。您必须为单个项目添加一个列表。或者，如果您有多个复选框，上述代码将从显示中删除所有列表项。另外，询问者要求使用.fadeOut，而不是.hide。我建议使用Arun的repy，因为在您的解决方案中，要更改复选框的状态，您必须单击复选框本身。通过使用，可以使文本内容可单击以更改复选框的状态。这对用户更友好。仅供参考，有标签可以放置文本，并使用for属性将其与字段关联。将输入和标签包装在p或div中，或任何您希望的元素中。。然后淡出。

$('#lblSkipOnClick').fadeOut();

 <input id="skipOnClick" type="checkbox"/><span>- Skip song when notification is clicked?</span>

$('#skipOnClick').change(function(){

$('#skipOnClick').fadeOut();
    $('#skipOnClick').next('span').fadeOut();
});

<input id="skipOnClick" type="checkbox"></input>
<label for="skipOnClick">-   Skip song when notification is clicked?</label>

$('#skipOnClick').fadeOut();
$('#skipOnClick').next("label").fadeOut();