无法在复选框旁边显示元素

Question

我有这样的HTML：

<input type="checkbox" class="chk-class" /> Click to enable<br/>
<div class="hidden">Hidden content here</div>

我想在单击复选框时显示内容。所以这是JS：

$('.chk-class').bind('click', function(){
    $(this).closest('.hidden').show();
});

为什么这不起作用？

PS：我不想使用ID。我希望动态分配这个，因为我有多个复选框。

Answer 1

这是我能看到的第二个兄弟姐妹

$('.chk-class').on('change', function(){
    $(this).next().next().toggle();
});

演示：Fiddle

另一种方法是（如果您不确定复选框和隐藏之间的元素）

$('.chk-class').on('change', function () {
    $(this).nextUntil('.hidden').last().next().toggle();
});

演示：Fiddle

Answer 2

最近向上移动使用next

$(this).next().show();

编辑使用nextAll('selector:first')显示具有特定class/id etc的下一个元素

$(this).nextAll('.hidden:first').show()

Answer 3

首先，您应该使用display：none

隐藏hidden div

.hidden {
    display: none;
}

然后

$(".chk-class").click(function(){
    $(".hidden").css("display","block");
});

http://jsfiddle.net/e5Jvg/

Answer 4

$('.chk-class').change(function(){
    $(this).next('.hidden').toggle();
});