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>

以上代码是我想要实现的目标的粗略指南小提琴在这里{{3}}

Answer 1

您没有为每组元素设置包装元素，一个选项是使用包装器包装每组元素，然后使用closest()和find()。

但是使用给定的标记，您需要做的是选择当前form-group元素的下一个兄弟元素，所以

＆＃13;

jQuery(function($) {
  $(".HideRow").click(function() {
    $(this).closest('.form-group').nextUntil('.form-group', '.hideme1, .hideme2, .hideme3').toggle(!this.checked);
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的用例非常简单，您需要创建一个类并将其附加到所有div。进一步使用on change事件切换这些div。这是它的jsfiddle

CSS

 .hidden {
  display : block;
}

的Javascript

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

});

请在此处查看完整的工作代码 https://jsfiddle.net/avinash8526/a362u5px/

隐藏复选框选择中的一组div

2 个答案: