0

我有多组复选框，它们根据选中的复选框显示/隐藏一个 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
});
4

5 回答 5

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
});
于 2013-02-12T23:31:53.777 回答
1

在输入上使用 htmldata attributes并通过 id 定位 div 怎么样？我在这里整理了一个简单的例子：http: //jsfiddle.net/mRZYf/

于 2013-02-12T23:27:51.463 回答
0

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

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

确保你给属于一起的收音机有相同的名字！

于 2013-02-12T23:20:11.383 回答
0

也许这就是你想要的 - 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 不是在该选择器指定的级别。

于 2013-02-12T23:20:53.183 回答
0

如果您的复选框是最接近的兄弟，另一种选择可能是使用 CSS。

示例小提琴在这里

示例 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;
}
于 2019-07-23T11:12:21.487 回答