Javascript 如何基于css类子类和复选框隐藏父div

我很难弄清楚隐藏某些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>

您可以使用以下命令将

祖父母的复选框的状态设置为目标

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


$（“：radio[name='select_radio']”）。在（'change'，function（）上{
if（$（“输入[name='select_radio']：选中”）.val（）=='Yes'）{
$（“.grandparent:has（.child:checkbox:not（：checked））”）.hide（）；
}
if（$（“输入[name='select_radio']：选中”）.val（）{
$（“.grandparent:has（.child）”）.hide（）
}
});

选择x
对
不
我是祖父母

我是父母

我是孩子

再加一个
我是祖父母

我是父母

我是孩子

再加一个
我是祖父母

我是父母

我是孩子

我会这样做：
代码并不完美，但我认为功能正是您所需要的


HTML:


选择x
对
不
我是祖父母

我是父母

我是孩子

再加一个
我是祖父母

我是父母

我是孩子

再加一个
我是祖父母

我是父母

我是孩子

第一个片段仅限于CSS。布局需要更改以适应和同级选择器的使用。第二个代码段使用jQuery。虽然HTML布局没有改变（
#relationship
是例外），但我添加了注释作为更好标记的建议。顺便说一句，如果您使用单选按钮，最好将其中一个设置为默认选中状态（测验答案除外）

详细信息在两个片段中都有注释

版本

输入，
标签{
字体：继承；
}
/*关闭超控*/
#否：选中+标签+br+输入+标签+br~*{
显示：无
}
/*关闭内容块*/
br+div，
输入[类型=复选框]，
输入[类型=复选框]+标签{
显示：无；
}
/*打开内容块*/
输入：选中+标签+br+div{
显示：块；
}
/*打开内容开关*/
输入：选中+标签+br+div+输入，
输入：选中+标签+br+div+输入+标签{
显示：内联块；
}
/*表示层次关系
||（可选）
*/
div{
填充：10px；
}
/*背景（可选）*/
.祖父母{
背景：rgba（255,0,0,3）；
}
.家长{
背景：rgba（0,255,0,3）；
}
.孩子{
背景：rgba（0,025,3）；
}
CSS版本
选择x

否

是

我是祖父母

我是父母

我是孩子

添加另一个

我是祖父母

我是父母

我是孩子

添加另一个

我是祖父母

我是父母

我是孩子

尝试隐藏祖父母div将隐藏嵌套在其中的所有内容。无法隐藏祖父母div，但仍显示该祖父母元素中的子div。现在，让我们来看看逻辑：如果要说label_radio_yes===true，请使用嵌套复选框显示第一个祖父母。如果选中了第一个祖父母与子祖父母复选框===则显示第二个祖父母与嵌套复选框。如果选中了“第二祖父母有孩子”复选框===则显示“第三祖父母有孩子”复选框。这就是你想要做的吗？好吧，第三个div没有复选框，我不想在需要显示孩子时隐藏祖父母。但是，是的，这就是我想要的。有一种方法可以隐藏祖父母，同时仍然显示孩子和/或孙子，但我无法理解逻辑。选择“是”应该只显示div 1。选择“否”将隐藏所有三个div。@xseriff已更新，我们在这里指导您修改代码以满足您的要求
if ($("input[name='select_radio']:checked").val() == 'No') {
    $(".child").parent(".parent").parent(".grandparent").hide();
}

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()
}

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;
  }

}

<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>