如何基于CSS类的孩子和复选框隐藏父div

Question

我很难弄清楚隐藏某些div的条件。 我的代码看起来像这样

<div>          
      <div>
        <label id="radio" for="select_radio">Select x</label>
      </div>
      <div>
          <div>
              <input name="select_radio" value="Yes" id="yes" type="radio">
              <label id="label_radio_yes" for="yes">Yes </label>
          </div>
          <div>
              <input name="select_radio" value="No" id="no" type="radio">
              <label id="label_radio_no" for="no">No </label>
          </div>
      </div>
</div>
<div class="grandparent"> 
    <p>I am the grandparent</p>
    <div class="parent"> 
        <p>I am the parent</p>
        <div class="child">
            <p>I am the child</p>
            <input class="child" value="Y" id="checkbox_2" type="checkbox">
            <label id="label_2" for="checkbox_2" class="child">Add another</label>
        </div> 
    </div>
</div>
<div class="grandparent"> 
    <p>I am the grandparent</p>
    <div class="parent"> 
        <p>I am the parent</p>
        <div class="child">
            <p>I am the child</p>
            <input class="child" value="Y" id="checkbox_3" type="checkbox">
            <label id="label_3" for="checkbox_3" class="child">Add another </label>
        </div> 
    </div>
</div>
<div class="grandparent"> 
    <p>I am the grandparent</p>
    <div class="parent"> 
        <p>I am the parent</p>
        <div class="child">
            <p>I am the child</p>
        </div> 
    </div>
</div>

我要达到的目的是在以下情况下隐藏祖父母（对dom）：

• 单选按钮是被选中
• 祖父母有“孩子”儿童班
• 未选中div中的复选框

基本上，如果单选为是，则显示第二个div，并选中第一个div中的复选框。 并显示“第二个div”复选框处于选中状态。

隐藏一切都可以做到

if ($("input[name='select_radio']:checked").val() == 'No') {
    $(".child").parent(".parent").parent(".grandparent").hide();
}

Answer 1

您可以使用:has()选择器来定位grandparent复选框的:checked状态

if ($("input[name='select_radio']:checked").val() == 'Yes') {
    $(".grandparent:has(.child :checkbox:not(:checked))").hide();
}

if ($("input[name='select_radio']:checked").val() == 'No') {
    $(".grandparent:has(.child)").hide()
}

注意：在代码段中，我附加了一个事件处理程序。

 $(":radio[name='select_radio']").on('change', function() { if ($("input[name='select_radio']:checked").val() == 'Yes') { $(".grandparent:has(.child :checkbox:not(:checked))").hide(); } if ($("input[name='select_radio']:checked").val() == 'N0') { $(".grandparent:has(.child)").hide() } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div> <label id="radio" for="select_radio">Select x</label> </div> <div> <div> <input name="select_radio" value="Yes" id="yes" type="radio" checked> <label id="label_radio_yes" for="yes">Yes </label> </div> <div> <input name="select_radio" value="No" id="no" type="radio"> <label id="label_radio_no" for="no">No </label> </div> </div> </div> <div class="grandparent"> <p>I am the grandparent 1</p> <div class="parent"> <p>I am the parent</p> <div class="child"> <p>I am the child</p> <input class="child" value="Y" id="checkbox_2" type="checkbox"> <label id="label_2" for="checkbox_2" class="child">Add another</label> </div> </div> </div> <div class="grandparent"> <p>I am the grandparent 2</p> <div class="parent"> <p>I am the parent</p> <div class="child"> <p>I am the child</p> <input class="child" value="Y" id="checkbox_3" type="checkbox"> <label id="label_3" for="checkbox_3" class="child">Add another </label> </div> </div> </div> <div class="grandparent"> <p>I am the grandparent 3</p> <div class="parent"> <p>I am the parent</p> <div class="child"> <p>I am the child</p> </div> </div> </div> 

Answer 2

我会做这样的事情：代码不是完美的，但是我认为功能就是您想要的。

https://jsbin.com/haqaxuhesi/edit?html,js,output

var grandParents = $(".grandparent");
var subContainer = $(".sub-element");
var checkbox_0 = $("#checkbox_0");
var checkbox_1 = $("#checkbox_1");
var state = {
  open: false,
  checkbox_0: false,
  checkbox_1: false
};

//hide everything on load at first except for first element
grandParents.each( function(index, el){
  if(index === !0){
      $(this).hide();
  }
});

//check the radio value on pageload
checkRadioOnLoad();

//check inputs on pageload
checkInputs();


$(":radio[name='select_radio']").on('change', function() {

  var masterSelect = $(this).val();

  if(masterSelect === "Yes"){
    state.open = true;
  }else{
    state.open = false;
  }

  toggleContainer();

});

$(checkbox_0).on('change', function() {

  if(this.checked){
    state.checkbox_0 = true;
  }else{
    state.checkbox_0 = false;
  }

  //re-run check
  checkInputs();

});

$(checkbox_1).on('change', function() {

  if(this.checked){
    state.checkbox_1 = true;
  }else{
    state.checkbox_1 = false;
  }

  //re-run check
  checkInputs();

});

function toggleContainer(){
  if(state.open === true){
    subContainer.show();
  }else{
    subContainer.hide();
  }
}

function checkInputs(){

  if(state.checkbox_0){
    checkbox_1.parent().parent().parent().show();
  }else{
    checkbox_1.parent().parent().parent().hide();
  }

  if(state.checkbox_1){
    $(grandParents[2]).show();
  }else{
    $(grandParents[2]).hide();
  }
}


function checkRadioOnLoad(){
  if($("#radio_yes")){
    state.open = true;
  }else{
    state.open = false;
  }

}

HTML：

<div>
  <div>
    <label id="radio" for="select_radio">Select x</label>
  </div>
  <div>
    <div>
      <input name="select_radio" value="Yes" id="radio_yes" type="radio" checked>
      <label id="label_radio_yes" for="yes">Yes </label>
    </div>
    <div>
      <input name="select_radio" value="No" id="radio_no" type="radio">
      <label id="label_radio_no" for="no">No </label>
    </div>
  </div>
</div>
<div class="sub-element">
  <div class="grandparent">
  <p>I am the grandparent 1</p>
  <div class="parent">
    <p>I am the parent</p>
    <div class="child">
      <p>I am the child</p>
      <input class="child" value="Y" id="checkbox_0" type="checkbox">
      <label id="label_2" for="checkbox_2" class="child">Add another</label>
    </div>
  </div>
</div>
<div class="grandparent">
  <p>I am the grandparent 2</p>
  <div class="parent">
    <p>I am the parent</p>
    <div class="child">
      <p>I am the child</p>
      <input class="child" value="Y" id="checkbox_1" type="checkbox">
      <label id="label_3" for="checkbox_3" class="child">Add another </label>
    </div>
  </div>
</div>
<div class="grandparent">
  <p>I am the grandparent 3</p>
  <div class="parent">
    <p>I am the parent</p>
    <div class="child">
      <p>I am the child</p>
    </div>
  </div>
</div>

Answer 3

第一个片段仅是CSS。 需要更改布局以适应+和~兄弟选择器的使用。 第二个片段使用jQuery。 尽管HTML布局未更改（ #relationship为例外），但我添加了注释作为更好标记的建议。 顺便说一句，如果您使用单选按钮，则最好在默认情况下将其中一个设置为选中状态（测验答案除外）。

两个片段均对细节进行了评论

CSS版本

 input, label { font: inherit; } /* Switch OFF override */ #no:checked+label+br+input+label+br~* { display: none } /* Switch OFF for content blocks */ br+div, input[type=checkbox], input[type=checkbox]+label { display: none; } /* Switch ON for content block */ input:checked+label+br+div { display: block; } /* Switch ON for content switch */ input:checked+label+br+div+input, input:checked+label+br+div+input+label { display: inline-block; } /* Presents the hierarchical relationship || (optional) */ div { padding: 10px; } /* Backgrounds (optional) */ .grandparent { background: rgba(255, 0, 0, .3); } .parent { background: rgba(0, 255, 0, .3); } .child { background: rgba(0, 0, 255, .3); } 

 <h3>CSS VERSION</h3> <!--MAIN SWITCH BEGIN||||||--> <label id="radio" for="select_radio">Select x</label><br/> <!--#no is checked by defualt======--> <input name="select_radio" value="No" id="no" type="radio" checked> <label id="label_radio_no" for="no">No</label><br/> <input name="select_radio" value="Yes" id="yes" type="radio"> <label id="label_radio_yes" for="yes">Yes</label><br/> <!--MAIN SWITCH END||||||--> <!--CONTENT BLOCKS BEGIN||||||--> <!--Content Block 1======--> <div class="grandparent"> <p>I am the grandparent</p> <div class="parent"> <p>I am the parent</p> <div class="child"> <p>I am the child</p> </div> </div> </div> <!--Content Switch 1======--> <input class="child" value="Y" id="checkbox_2" type="checkbox"> <label id="label_2" for="checkbox_2" class="child">Add another</label><br/> <!--Content Block 2======--> <div class="grandparent"> <p>I am the grandparent</p> <div class="parent"> <p>I am the parent</p> <div class="child"> <p>I am the child</p> </div> </div> </div> <!--Content Switch 2======--> <input class="child" value="Y" id="checkbox_3" type="checkbox"> <label id="label_3" for="checkbox_3" class="child">Add another </label><br/> <!--Content Block 3======--> <div class="grandparent"> <p>I am the grandparent</p> <div class="parent"> <p>I am the parent</p> <div class="child"> <p>I am the child</p> </div> </div> </div> <!--CONTENT BLOCKS END||||||--> 

jQuery版本

 /* Delegate the change event on #no and #yes || When one of them changes from checked to || unchecked and vice versa... */ $('[name=select_radio]').on('change', function(e) { //...if `this` is #yes and it's checked... if ($(this).is('#yes:checked')) { //... show #relationship $('#relationship').show(); } else { // Otherwise hide #relationship $('#relationship').hide(); } }); /* Delegate the change event to all checkboxes || with the class .child. || When it changes (checked or not)... */ $(':checkbox.child').on('change', function(e) { // Find it's closest ancestor .grandparent var grand = $(this).closest('.grandparent'); /* If checked, then find the .grandparent || after the .grandparent previously found and || then show it. */ if ($(this).is(':checked')) { grand.next('.grandparent').show(); } else { /* Otherwise find ALL .grandparents that proceed || previously found .grandparent and find their || checkbox and uncheck it, then hide the .grandparent */ grand.nextAll('.grandparent').hide().find(':checkbox.child').prop('checked', false); } }); 

 input { font: inherit; display: inline-block; } .grandparent, #relationship { display: none; } section>div:first-of-type { display: block; } /* Presents the hierarchical relationship (optional) */ div { padding: 10px; } /* Backgrounds (optional) */ .grandparent { background: rgba(255, 0, 0, .3); } .parent { background: rgba(0, 255, 0, .3); } .child { background: rgba(0, 0, 255, .3); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>jQuery Version</h3> <!-- Comments with ✲ denotes uneccessary or inefficient markup and better alternatives --> <!-- ✲ input {display:inline-block} --> <!-- ✲ remove div; margin-bottom and <br> on #label_radio_no --> <div> <!-- ✲ remove div; display:block or add <br> to #radio --> <div> <label id="radio" for="select_radio">Select x</label> </div> <!-- ✲ remove div; --> <div> <!-- ✲ remove div; add <br> and margin-bottom to #label_radio_yes --> <div> <input name="select_radio" value="Yes" id="yes" type="radio"> <label id="label_radio_yes" for="yes">Yes </label> </div> <!-- ✲ remove div; --> <div> <!--#no is checked by default --> <input name="select_radio" value="No" id="no" type="radio" checked> <label id="label_radio_no" for="no">No </label> </div> </div> </div> <!--Wrap all content up in a container --> <section id='relationship'> <div class="grandparent"> <p>I am the grandparent</p> <div class="parent"> <p>I am the parent</p> <div class="child"> <p>I am the child</p> <input class="child" value="Y" id="checkbox_2" type="checkbox"> <label id="label_2" for="checkbox_2" class="child">Add another</label> </div> </div> </div> <div class="grandparent"> <p>I am the grandparent</p> <div class="parent"> <p>I am the parent</p> <div class="child"> <p>I am the child</p> <input class="child" value="Y" id="checkbox_3" type="checkbox"> <label id="label_3" for="checkbox_3" class="child">Add another </label> </div> </div> </div> <div class="grandparent"> <p>I am the grandparent</p> <div class="parent"> <p>I am the parent</p> <div class="child"> <p>I am the child</p> </div> </div> </div> </section>