Javascript 如何从jquery下拉按钮控制check元素

我用过这个。这是。这是本步骤的步骤：

因此，功能：

选择一个选项时，将出现一个包含该选项标题的新框。例如，如果您单击下拉列表中的“Low”，将出现一个包含文本的新框，“Low”带有一个十字按钮

我写的剧本是这样的：

$('.low-option input[type=checkbox]').change(function(){
    if($(this).prop('checked')){
        $('#low-box').show();
    } else {
        $('#low-box').hide();
    }
});

如果通过单击“交叉”按钮删除框，则该框将被删除，相邻的复选框将被取消选中

所以，我写了这个：

$('.option-box').on('click', '.cross', function() {
    $(this).parent().remove();  
});

if($('#low-box').is(":hidden")) {
    $('.low-option input[type=checkbox]').prop('checked', false);   
}

var count = $('.option-content .option-box').is(":visible").length;
if (count > 0){
    $('.option-content').show();
} else{
    $('.option-content').hide();
}

div.option-content

首先被隐藏。如果任何

div.option-box

将可见，则

div.option-content

也将可见。如果没有可见的

div.option-box

，

div.option-content

将始终隐藏

为此，我写了以下内容：

$('.option-box').on('click', '.cross', function() {
    $(this).parent().remove();  
});

if($('#low-box').is(":hidden")) {
    $('.low-option input[type=checkbox]').prop('checked', false);   
}

var count = $('.option-content .option-box').is(":visible").length;
if (count > 0){
    $('.option-content').show();
} else{
    $('.option-content').hide();
}

---

但是，我的脚本工作不正常。因为，我不太擅长jQuery，我找不到原因，也找不到正确的方法。你能帮我解决脚本中的问题吗？

在这里，我重写了你的代码，这样它将变得更具可伸缩性。。您遗漏的重要部分是将

复选框

与

选项框

关联/连接起来，这样您就更容易

隐藏

或

显示

相关元素。。看看这个工作

---

干杯。

这太棒了。非常感谢你！