Javascript 单击另一个复选框后显示选中的复选框

有一个带有复选框的树结构。已经讨论过

我面临的问题是，当我点击一个项目时，它被选中了，但并没有在控制台中显示。 当我单击另一个项目时，第一个项目显示在检查列表中，但当前未单击该项目。单击其他项目后，此项目将显示在那里

所以，它在工作，但不是在我点击项目的时候，而是在点击另一个项目之后

$（文档）.ready（函数（）{
var toggle=函数（）{
//var id=$（this）.parent（）.find（'input:first'）[0].id；
//$（“#”+id）.find（“input”）.prop（'checked'，'checked'）；
//$（this.find（“input”）.prop（'checked'，true）；
//console.log（$（this.parent（）.find（'input:first'）[0].id）；
如果（！$（this.nexist（“li”）.find（“ul:first”）是（：可见的）和（&$（this.nexist（“li”）是（：可见的）{
//控制台日志（“已检查”）；
$（this）.parent（'li:has（>ul'））.find（“span:first”）.removeClass（“glyphicon glyphicon加号”）.addClass（“glyphicon减号”）；
}否则{
//控制台日志（“未选中”）；
$（this）.parent（'li:has（>ul'））.find（“span:first”）.removeClass（“glyphicon glyphicon减号”）.addClass（“glyphicon glyphicon加号”）；
}
$（this.parent（）.children（）.toggle（）；
$（this.toggle（）；
log（$（'input[name=“level1”]：checked'）；
log（$（'input[name=“level2”]：checked'）；
log（$（'input[name=“level3”]：checked'）；
};
$（“.Collapsable”）。单击（切换）；
$（“.Collapsable”）。每个（切换）；
$（'.tree li:not（：has（>ul）））.find（“span:first”）.addClass（“glyphicon glyphicon书签”）；
});
ul.tree，
树{
列表样式：无；
保证金：0；
填充：0；
}
树{
左边距：0px；
}
李树{
保证金：0；
左边距：20px；
填充：0 7px；
线高：20px；
颜色：#369；
字体大小：粗体；
左边框：1px实心rgb（100100100）；
}
李树：最后一个孩子{
左边界：无；
}
李树：以前{
位置：相对位置；
顶部：-0.3em；
高度：1米；
宽度：12px；
颜色：白色；
边框底部：5px实心rgb（100100100）；
内容：“；
显示：内联块；
左：-7px；
}
李树：最后一个孩子：之前{
左边框：1px实心rgb（100100100）；
}
输入[类型=复选框]{
位置：绝对位置；
页边距顶部：4px\9；
左边距：-20px；
可见性：隐藏；
}
输入[类型=复选框]+标签{
显示：首字母；
}
输入[类型=复选框]：选中+标签{
颜色：#f00；
}



家长1


儿童1


儿童1(2)


大孩子


大孩子






家长2


儿童2


儿童2


大孩子


大孩子






家长3


儿童(3)(1)


大孩子3个1个


大孩子3岁1岁2岁




儿童(3)(1)




单击标签时，只有在标签的单击处理程序返回后，才会出现单击关联复选框。因此，当标签的处理程序运行时，复选框还没有被选中

您应该将单击处理程序放在复选框上，而不是标签上。但是，这段代码不能正常工作：

$(this).parent().children().toggle();
$(this).toggle();

因为
$（this）
不是标签，而是复选框。因此，单击标签时，标签将消失。将该代码更改为：

$(this).parent().children().toggle();
if ($(this).is(":checkbox")){
    $(`label[for=${this.id}]`).toggle();
} else {
    $(this).toggle();
}

因此，当您从复选框单击处理程序调用
toggle（）
时，它会切换此复选框的标签

-只有前两个复选框具有事件绑定中使用的
Collapsable
类，因此单击其余复选框不起任何作用。
当我单击某个项目时，它会变为红色。当我再次单击它时，它会变回黑色。应该怎么办呢？复选框是隐藏的，你怎么知道它是否被选中了呢？首先，将
var
name
toggle
更改为其他内容，JS在console.log中添加了一些@Barmar注释，一旦打开JSFIDLE，你就会发现在点击该项目后，它变为红色并选中，但在控制台中，它不显示选中。明白我的意思了吗？即使您想检查复选框是否被选中，也要查看日志。@Barmar如果它工作正常，那么我为什么要在这里提出这个问题。。我建议，在投票否决之前，仔细考虑一下这个问题。好把戏。但演示小提琴不能正常工作。我无法展开其他树元素。我只在fiddle的前两个复选框中添加了
class=“Collapsable1”
。@Suresponnukalai为您做了。。。