從複選框中隱藏一組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/