如何根据css类子项和复选框隐藏父div

时间：2017-04-03 17:38:17

标签： javascript jquery html css

我在找出隐藏某些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）：

  • radiobutton yes被选中
  • 祖父母有一个“孩子”儿童班
    • 未选中div中的
  • 复选框

基本上，如果收音机为是，则显示第二个div，并选择第一个div中的复选框。并显示第三个div是选中第二个div中的复选框。

通过执行

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

3 个答案:

答案 0 :(得分：0)

您可以使用:checked

定位grandparent的{​​{3}}状态复选框 
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>

答案 1 :(得分：0)

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

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>

答案 2 :(得分：0)

第一个Snippet仅限CSS。需要更改布局以适应+和~兄弟选择器的使用。第二个Snippet使用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>

相关问题
最新问题