Javascript 如何通过单击包含复选框的div来选中/取消选中复选框？

我的div中包含1个复选框。每当我单击div时，它都会更改div的类名。此外，我希望在更改div的类名时选中并取消选中标记

$（“.tags”）。单击（函数（）{
if（$（this）.hasClass（“活动”））{
$（此）.removeClass（“活动”）；
$（此）.addClass（“非活动”）；
}else if（$（this）.hasClass（“非活动”））{
$（此）.removeClass（“非活动”）；
$（此）.addClass（“活动”）；
}
})

.主动{
颜色：绿色；
}
.不活跃{
颜色：红色；
}
项目1
项目2
第3项

您可以做得更短：

$（“.tags”）。单击（函数（）{
$（this）.toggleClass（“活动-非活动”）
.find（“input:checkbox”）.prop（“checked”、$（this）.hasClass（“active”））
})

.active{背景色：黄色}
.inactive{边框：1px实心红色}

项目1
项目2
Item3

您只需在单击的元素中搜索复选框子体，并切换其

.checked

属性

此外，您实际上不需要

非活动类。Inactive只是普通样式，只有当元素处于活动状态时，才需要覆盖默认样式。当它不再处于活动状态时，您只需删除该类并恢复为默认类


$（“.tags”）。单击（函数（）{
//在单击的div中查找输入并
//将其checked属性设置为相反的值
//现在的情况。
$（this.find（“input”）.prop（“checked”），！$（this.find（“input”）.prop（“checked”）；
//切换活动类
$（此）.toggleClass（“活动”）；
});
div.active{背景色：黄色；边框：0；}
.tags{边框：1px实心红色}

项目1
项目2
Item3
这可能不是您想要的东西，但在这种情况下，这可能是更好的方法
有一个属性
，用于将其自动链接到输入。此方法可能更容易访问（因为浏览器了解正在发生的事情），并且因为它不依赖于单击事件，所以在使用键盘切换复选框时没有问题


$（“.tags输入”）.change（函数（）{
如果（选中此项）
$（this）.parents（“.tags”）.addClass（“活动”）.removeClass（“非活动”）；
其他的
$（this）.parents（“.tags”）.removeClass（“active”）.addClass（“inactive”）；
});
.active{
颜色：绿色；
}
.不活跃{
颜色：红色；
}

项目1
项目2
项目3