Question

您好我需要帮助，当您点击某个部分中的任意一个复选框时，显示下方的“显示/隐藏div”并隐藏。我打算有多个部分，数量未知，因此无法使用ID。所以我一直在寻找一种通用的方法，如果单击一个区域中的复选框，则“显示/隐藏”仅显示在该区域中。我知道你可以通过编写单独的代码并为每个部分分配ID来实现这一点，但有没有办法让它像我一样希望避免不断更新代码？当选中/取消选中复选框或调用css类时，是否可以只定位最近的div或元素旁边的实现？

这是我的HTML

<!--section 1 --> 
section 1
<div class="showHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
    </div>
</div>

section 2    
<!--section 2 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
    </div>
</div>

section 3  
<!--section 3 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
    </div>
</div>

section 4    
<!--section 4 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
    <div class="checkbox">
        <input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
        <input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
    </div>
</div>

Answer 1

修复无效的html后（您需要为</div>添加结束<div class="custom-input">），您可以使用

$(this).closest('.custom-input').prev('.ShowHideDiv') //where $(this) is the checkbox

Refer this fiddle示例（基于评论），如果未选中任何复选框，则隐藏<div>，如果选中其中一个或两个复选框，则显示<div> < / p>

Answer 2

我会这样做：

$('.checkbox').on('click', function(){
    $(this).closest('.custom-input').prev('.showHideDiv').toggle();
});

只需确保您的标记已正确关闭，并且所有showHideDiv类完全相同（即现在有些以小写字母开头，有些以大写字母开头）

<强>更新

http://jsfiddle.net/EEj29/

使用复选框显示/隐藏多个Div，而不使用ID唯一的类名

2 个答案: