javascript - 单击主自定义复选框打开一个复选框组

Question

我有一个 css 自定义复选框。当有人选中它时，必须出现一个复选框组。

如果您检查当前代码，我已经隐藏了主复选框。一旦用户点击该框，它应该会显示一组应该位于该框内的复选框。

我面临的主要问题是当我将复选框组放入框中时出现 html 校准错误。

我怎样才能做到这一点？

.custom_chk  input[type="checkbox"] {
    display: none;
}
.custom_chk label {
    border: 1px solid #e9f8fb;
    padding: 16px;
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-box-shadow: 1px 2px 3px -2px #999;
    -moz-box-shadow: 1px 2px 3px -2px #999;
    box-shadow: 1px 2px 3px -2px #999;
	margin-top: 15px;
	margin-bottom:10px;
	background: #FDFDFD;
	font-family: 'proxima_novaregular', Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: normal;
}
.custom_chk label::before {
    background-color: white;
    border: 1px solid #ff6d6d;
    color: white;
    content: " ";
    display: block;
    height: 25px;
    line-height: 28px;
    position: absolute;
    right: -2px;
    text-align: center;
    top: -2px;
    transform: scale(0);
    transition-duration: 0s;
    width: 25px;
}
.custom_chk :checked+label {
    outline: 2px solid #FF6D6D;
}
.custom_chk :checked+label:before {
    content: "\2713";
    background-color: #FF6D6D;
    transform: scale(0.9);
}

<div class="form-group custom_chk">
  <div class="col-lg-10 col-md-12 col-sm-12">
    <div class="row">
      <div class="col-lg-5 col-md-5 col-sm-5">
        <input type="checkbox" id="hyper_self" name="hyper_self" />
        <label for="hyper_self">
          <span class="ailment_icon hyper"></span>
          <span class="ailment_text">main Item</span>
          <span class="check_family">
            <span class="check_family_item">
              <input type="checkbox" class="custom-control-input" id="diab_gp">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">
                <label for="diab_gp">Grand Parents</label></span>
            </span>
          </span>
        </label>
      </div>
    </div>
  </div>
</div>

Answer 1

custom_chk 类应赋予输入复选框。

这些是您需要添加的 CSS 更改

.custom_chk+label+.checkbox-group {
  display:none;
}
.custom_chk:checked+label+.checkbox-group {
  display:block;
}

您可以在 plunker URL 中找到工作示例

http://plnkr.co/edit/D97DUvyzIvVU88Fy4YpD?p=preview