Question

我有多组复选框，根据选中的复选框显示/隐藏div。这可以使用ID来完成，但我会在同一页面上有多组这些，并且需要一个更通用的选择器，例如类或选择最接近复选框的元素。

也许有人知道为什么这不正确选择或知道更好的方法？ http://jsfiddle.net/infatti/h3rh7/

$('.check-hide-show-content').hide(); // hide all content divs

// begin show/hide
$('.check-hide-show input:checkbox').click(function () {

    $(this).parent().next('.check-hide-show-content').show();


    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked
});

Answer 1

如何在输入上使用html data attributes，并通过ID定位div？我在这里拼凑了一个简单的例子：http://jsfiddle.net/mRZYf/

Answer 2

非常简单：

$('.check-hide-show-content').hide(); // hide all content divs

// begin show/hide
$('.check-hide-show input:checkbox').change(function () {
    $('.check-hide-show-content').hide().eq($(this).index('.check-hide-show input:checkbox')).show();
    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked
});

Answer 3

如果您希望客户端只能检查一个元素，则可以使用输入类型无线电。

<form>
<input type="radio" name="check" id="radio1"></input>
<input type="radio" name="check" id="radio2"></input>
</form>

确保您所属的无线电设备具有相同的名称！

Answer 4

也许这就是你想要的 - http://jsfiddle.net/FloydPink/VL7Vx/1/

$('.check-hide-show-content').hide(); // hide all content divs

// begin show/hide
$('.check-hide-show input:checkbox').click(function () {
   $('.check-hide-show-content').hide(); // hide all content divs
    $('.' + $(this).val()).show();
    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked
});

请注意，我还对标记进行了更改，方法是在内容div中添加符合复选框值的新css类（option1和option2）。这是将复选框绑定到相应div的一种方法。

在你的代码中，你试图使用'$（this）.parent（）。next（'。check-hide-show-content'）'从复选框中获取div，这将不会成功，因为内容div不在该选择器指定的级别。

Answer 5

如果您的复选框与兄弟姐妹最接近，则另一个选择是使用CSS。

小提琴here

示例HTML

<label>Show Div A? : </label>
<input type="checkbox">
<div>I'm Div A</div><br>

<label>Show Div B? : </label>
<input type="checkbox">
<div>I'm Div B</div><br>

<label>Show Div C? : </label>
<input type="checkbox">
<div>I'm Div C</div><br>

示例CSS

div {
  display: none;
}

input:checked + div {
  display: block;
}

使用复选框显示/隐藏最近的div

5 个答案: