チェックボックスからdivのセットを非表示にする

Question

私は作成した複雑なフォームを持っていますが、特定のDIVSセットを隠すためにjQueryを構築しようとすると脳が衰退しています。私が望むのは、チェックボックスをオンにすると、これらの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

あなたはラッパを持っていないです を達成したいものにおおよその目安です要素のセットごとに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に添付します。 On changeイベントをさらに使用すると、これらのdivを切り替えることができます。ここ はそれ

CSS

.hidden { 
    display : block; 
} 

Javascriptを

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

}); 

ここ https://jsfiddle.net/avinash8526/a362u5px/

を完全な作業コードを参照してくださいjsfiddleです