Javascript 基于用户选择输入隐藏/显示复选框

一直在努力解决这个问题。。我只是想要一个带有复选框的静态HTML表单。然后用户点击页面，然后可以通过复选框进行选择，选中的复选框保留在页面上，而未选中的复选框只是隐藏

下面是我尝试过的最新逻辑：

<div class="div1">
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
</div>

<div class="div2">
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label>
</div>

（2个复选框的简化版本，但请注意将有10个）

HTML:

<div class="div1">
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
</div>

<div class="div2">
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label>
</div>

显示/隐藏
显示/隐藏

尝试使用：

if ( $(this).is(':checked') ){
    $('.div1').show(1000);
    $('.div2').hide(1000);
}

注意：

$（'.div1'）

而不是

$（'#div1'）

，因为您使用的类没有ID

希望这有帮助

---

$（'#cbxShowHide'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（'.div1'）.show（）；
$（'.div2'）.hide（）；
}否则{
$（'.div2'）.show（）；
}
});
$（'#cbxShowHide2'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（'.div2'）.show（）；
$（'.div1'）.hide（）；
}否则{
$（'.div1'）.show（）；
}
});

显示/隐藏


第1部分内容



显示/隐藏


第2部分内容


看看这个解决方案


$（“按钮”）。在（“单击”，函数（）{
$（“输入[类型=复选框]：未（：选中）”）.parent（）.hide（）；
})
#块{显示：无；背景：eef；填充：10px；文本对齐：居中；}

显示/隐藏
显示/隐藏
隐藏复选框
您需要做的就是将这两个项都设置为class、
.div
和
.cbxShowHide
，然后执行以下操作：

$('.cbxShowHide').change(function(){
    $('.div').show(1000);
    if(this.checked) 
        $('.div').not($(this).parent()).hide(1000);
});


这将隐藏除您单击的元素之外的所有单击的项目。并在取消选中时显示元素