點擊主定製複選框打開復選框組

我有一個CSS自定義複選框。當有人檢查它時，必須出現複選框組。點擊主定製複選框打開復選框組

如果您檢查當前的代碼，我已隱藏主複選框。一旦用戶點擊該框，它應該會顯示一個應該在框內的複選框。

我面臨的主要問題是當我將複選框組放入框中時，我收到了html calidation錯誤。

我該如何做到這一點？

.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; 
 
\t margin-top: 15px; 
 
\t margin-bottom:10px; 
 
\t background: #FDFDFD; 
 
\t font-family: 'proxima_novaregular', Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
 
\t 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>

來源

2017-02-02 Abhilash Ramadasan

在哪裏「複選框組」工作實例？ –

你應該添加它，所以我們可以看到你的意思是_the html is not valid_。 –

好的。給我一點時間。 –

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

來源

2017-02-02 12:18:59 Pradeep

如果您查看我共享的代碼段，我想要複選框組出現在框內（原始複選框） –

點擊主定製複選框打開復選框組

回答

相關問題