从复选框中隐藏一组div div选择

Question

我有一个复杂的表单，但我在尝试构建一个jQuery以隐藏特定的DIVS集时褪色了大脑。我想要的是当复选框被选中时，这些div会隐藏起来。我有最接近的是这

jQuery(document).ready(function(jQ) { 
 
    jQ(".HideRow").click(function() { 
 
    if (jQ(this).is(":checked")) { 
 
     (jQ(this).closest('.wrapper').find('.hideme1, .hideme2, .hideme3').hide()); 
 
    } else { 
 
     (jQ(this).closest('.wrapper').find('.hideme1, .hideme2, .hideme3').show()); 
 
    } 
 
    }); 
 
});

.form-group { 
 
    clear: both; 
 
} 
 
.heading { 
 
    padding-right: 10px; 
 
} 
 
.header { 
 
    float: left !important; 
 
    padding-right: 10px; 
 
} 
 
.donothideme { 
 
    float: right !important; 
 
    padding-right: 10px; 
 
    padding-top: 8px; 
 
} 
 
.hideme1 { 
 
    Border: solid 2px blue; 
 
    padding: 10px 5px 5px 10px; 
 
    clear: both; 
 
} 
 
.hideme2 { 
 
    Border: solid 2px green; 
 
    padding: 10px 5px 5px 10px; 
 
} 
 
.hideme3 { 
 
    Border: solid 2px yellow; 
 
    padding: 10px 5px 5px 10px; 
 
    color: #000; 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="form-group"> 
 
    <div class="heading"> 
 
     <p></p> 
 
     <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
     </div> 
 
     <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
    </div> 
 
    <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
    </div> 
 
    <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
</div>

上面的代码是一个粗略的指南，我想实现 小提琴是这里https://jsfiddle.net/gpLxaj8y/

Answer 1

你不必包装元素用于每一组元素，一种选择是用包装器包装每一组元素，然后使用closest()和find()。

但与给定的标记，你需要做的是选择当前form-group元素，以便

jQuery(function($) { 
 
    $(".HideRow").click(function() { 
 
    $(this).closest('.form-group').nextUntil('.form-group', '.hideme1, .hideme2, .hideme3').toggle(!this.checked); 
 
    }); 
 
});

.form-group { 
 
    clear: both; 
 
} 
 
.heading { 
 
    padding-right: 10px; 
 
} 
 
.header { 
 
    float: left !important; 
 
    padding-right: 10px; 
 
} 
 
.donothideme { 
 
    float: right !important; 
 
    padding-right: 10px; 
 
    padding-top: 8px; 
 
} 
 
.hideme1 { 
 
    Border: solid 2px blue; 
 
    padding: 10px 5px 5px 10px; 
 
    clear: both; 
 
} 
 
.hideme2 { 
 
    Border: solid 2px green; 
 
    padding: 10px 5px 5px 10px; 
 
} 
 
.hideme3 { 
 
    Border: solid 2px yellow; 
 
    padding: 10px 5px 5px 10px; 
 
    color: #000; 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="form-group"> 
 
    <div class="heading"> 
 
     <p></p> 
 
     <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
     </div> 
 
     <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
    </div> 
 
    <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
    </div> 
 
    <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

你的使用情况是很简单的，你需要的下一个同级元素创建一个课程并将其附加到所有的div。进一步使用change事件切换这些div。 下面是它的jsfiddle

CSS

.hidden { 
    display : block; 
} 

的Javascript

$('#chkbox').change(function(){ 
    $('.hidden').toggle(); 

}); 

在这里看到完整的工作代码 https://jsfiddle.net/avinash8526/a362u5px/