Jquery 在页面上多个选中时隐藏/显示

我有两个“是/否”复选框。这些复选框将根据选中的复选框隐藏一个div。我有一个使用选择器ID的函数，但是我将动态地拉入多个选择器，并且需要此函数使用类来选择与单击的复选框最近的类

此函数使用ID工作，但我想使用类：

这不起作用，但需要使用相对于已单击复选框的选择器：

---

如何选择相对于已单击复选框的元素？我在这里没有做什么？

你会发现这种方法很难维护。想象一下如果你有50个复选框会发生什么；50条if语句，其中包含50行

.hide（）

和

.show（）

？我建议将每个复选框链接到它的

div

，可能通过

name=

属性

然后，你可以做：

<input type='checkbox' name='check-div1' />
<input type='checkbox' name='check-div2' />
<input type='checkbox' name='check-div3' />

<div class='check-hide-show-content' name='div-div1'> ... </div>
<div class='check-hide-show-content' name='div-div2'> ... </div>
<div class='check-hide-show-content' name='div-div3'> ... </div>

由于JSFIDLE目前对我不利，下面是一个例子。请注意，如果选中这两个复选框，它将只使用最新选中的一个。您可以通过添加以下内容来规避此问题：

$(".check-hide-show input[type='checkbox']").not(this).prop("checked", false);

---

（更新：现在打开了。）

您应该改用

单选按钮！不需要预先选择某些内容，而是需要用户在显示任何内容之前进行选择。很好。我没有想到用这个名字。
<input type='checkbox' name='check-div1' />
<input type='checkbox' name='check-div2' />
<input type='checkbox' name='check-div3' />

<div class='check-hide-show-content' name='div-div1'> ... </div>
<div class='check-hide-show-content' name='div-div2'> ... </div>
<div class='check-hide-show-content' name='div-div3'> ... </div>

$('.check-hide-show input:checkbox').click(function () {
    var divName = $(this).attr("name").substring(6); // Shave "check-" off the start
    var $targetDiv = $("div[name='div-" + divName + "']");
    $("div.check-hide-show-content").hide();
    $targetDiv.show();
});

$(".check-hide-show input[type='checkbox']").not(this).prop("checked", false);