Откройте группу флажков при нажатии на основной пользовательский флажок.

У меня есть чекбокс 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; 
 
\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 недействительным. –

Хорошо. Дай мне минуту. –

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

, если вы проверите фрагмент, который я поделил, я хочу, чтобы группы флажков отображались внутри поля (исходный флажок) –

Откройте группу флажков при нажатии на основной пользовательский флажок.

ответ

Смежные вопросы