0

Есть несколько чекбоксов и к каждому свой инпут, инпут должен скрываться и отображаться по чекбоксу, может кто подсказать красивое решение?

.conditions_check input[type="checkbox"]+label {
  height: 1.25vw;
  width: 1.25vw;
  display: inline-block;
  cursor: pointer;
  border: 0.125vw #815eca solid;
  border-radius: .7vw;
  margin-top: 0.625vw;
  margin-right: 0.5vw;
  position: relative;
  top: 0;
  left: 0;
}

.conditions_check input[type="checkbox"]+label::before {
  content: "";
  display: inline-block;
  height: 1.25vw;
  width: 1.25vw;
  margin: 0 0.05vw 0 0;
  background-repeat: no-repeat;
  left: 0;
  top: 0.3vw;
}

.conditions_check input[type="checkbox"]:checked+label::before {
  background-image: url('img/check_tablink.png');
  background-position: -2.6vw -0.4vw;
}

.conditions_check {
  display: inline-block;
  height: 2.5vw;
  width: 44vw;
  box-shadow: 0 0.0625vw 0.125vw rgba(0, 0, 0, .2);
  border-radius: 0.5vw;
  color: #170738;
  padding-left: 1vw;
  margin-top: 1vw;
}
<div class="conditions_check">
  <input id="conditions_check_telega1" type="checkbox" checkbox hidden>
  <label for="conditions_check_telega1"></label>
  <span>The user must be subscribed to the chanal</span>
</div>
<div class="conditions_input">
  <input type="text">
</div>
<div class="conditions_check">
  <input id="conditions_check_telega2" type="checkbox" checkbox hidden>
  <label for="conditions_check_telega2"></label>
  <span>The user must have at least X subscribers</span>
</div>
<div class="conditions_input">
  <input type="text">
</div>
<div class="conditions_check">
  <input id="conditions_check_telega3" type="checkbox" checkbox hidden>
  <label for="conditions_check_telega3"></label>
  <span>The user should repost a tweet with a hashtag</span>
</div>
<div class="conditions_input">
  <input type="text">
</div>

4 ответа 4

2

function conditionClick() {
  //console.log(this.id, this.checked);
  var $input = $(this).closest(".conditions_check").next(".conditions_input").find("input");
  this.checked? $input.show() : $input.hide();
}

$(".conditions_check input[type='checkbox']").click(conditionClick).each(function() {
  conditionClick.call(this);
});
.conditions_check input[type="checkbox"]+label {
  height: 1.25vw;
  width: 1.25vw;
  display: inline-block;
  cursor: pointer;
  border: 0.125vw #815eca solid;
  border-radius: .7vw;
  margin-top: 0.625vw;
  margin-right: 0.5vw;
  position: relative;
  top: 0;
  left: 0;
}

.conditions_check input[type="checkbox"]+label::before {
  content: "";
  display: inline-block;
  height: 1.25vw;
  width: 1.25vw;
  margin: 0 0.05vw 0 0;
  background-repeat: no-repeat;
  left: 0;
  top: 0.3vw;
}

.conditions_check input[type="checkbox"]:checked+label::before {
  background-image: url('img/check_tablink.png');
  background-position: -2.6vw -0.4vw;
}

.conditions_check {
  display: inline-block;
  height: 2.5vw;
  width: 44vw;
  box-shadow: 0 0.0625vw 0.125vw rgba(0, 0, 0, .2);
  border-radius: 0.5vw;
  color: #170738;
  padding-left: 1vw;
  margin-top: 1vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conditions_check">
  <input id="conditions_check_telega1" type="checkbox" hidden checked>
  <label for="conditions_check_telega1"></label>
  <span>The user must be subscribed to the chanal</span>
</div>
<div class="conditions_input">
  <input type="text">
</div>
<div class="conditions_check">
  <input id="conditions_check_telega2" type="checkbox" hidden checked>
  <label for="conditions_check_telega2"></label>
  <span>The user must have at least X subscribers</span>
</div>
<div class="conditions_input">
  <input type="text">
</div>
<div class="conditions_check">
  <input id="conditions_check_telega3" type="checkbox" hidden checked>
  <label for="conditions_check_telega3"></label>
  <span>The user should repost a tweet with a hashtag</span>
</div>
<div class="conditions_input">
  <input type="text">
</div>

9
  • Почему то не хочет работать у меня ваше решение ( 3 авг 2018 в 13:16
  • @МаксимВоробьев Вы, вероятно, не заметили, что я внес span-ы внутрь label-ов.
    – user176262
    3 авг 2018 в 13:27
  • Все равно не хочет работать, плюс я же при помощи label стилизую свой чекбокс и если туда добавить span то такой ужас получается) 3 авг 2018 в 13:32
  • @МаксимВоробьев Об этом я должен был сам догадаться? В Вашем примере label-ов вообще не видно. На что Вы собираетесь кликать, чтобы изменить состояние чекбокса?
    – user176262
    3 авг 2018 в 13:35
  • Я добавил стилизацию label-ов, надеюсь правильно. 3 авг 2018 в 13:41
2

Удивительно, но это можно сделать и без js, зачем нам лишний раз грузить пользователя =) Вот очень красивое решение!

.item {
  margin-bottom: 10px;
}

.checkbox {
  cursor: pointer;
}

.checkbox:checked ~ input {
  display: none;
}
<div class="items">
  <div class="item">
    <input class="checkbox" type="checkbox" />
    <input type="text" placeholder="Input 1" />
  </div>
  <div class="item">
    <input class="checkbox" type="checkbox" />
    <input type="text" placeholder="Input 2" />
  </div>
  <div class="item">
    <input class="checkbox" type="checkbox" />
    <input type="text" placeholder="Input 3" />
  </div>
</div>

1
  • Такой способ работает, только если они стоят рядом. 3 авг 2018 в 13:26
2

Есть несколько чекбоксов и к каждому свой инпут, инпут должен скрываться и отображаться по чекбоксу, может кто подсказать красивое решение?

Вот такое решение на Javascript

var chks = document.querySelectorAll('input[type="checkbox"]')
// Проходим по всем checkbox
chks.forEach(function(chk) {
  // Вешаем событие
  chk.addEventListener('click', function(e) {
    e.target.closest('.conditions_check')
      .nextElementSibling
      .firstElementChild
      .classList.toggle('hidden'); // Добавлен класс или убираем
  })
})
/********************  ********************/
label {
  cursor: pointer;
}

.hidden {
  display: none;
}
/********************  ********************/
.conditions_check label> input[type="checkbox"] {
  height: 1.25vw;
  width: 1.25vw;
  display: inline-block;
  cursor: pointer;
  border: 0.125vw #815eca solid;
  border-radius: .7vw;
  margin-top: 0.625vw;
  margin-right: 0.5vw;
  position: relative;
  top: 0;
  left: 0;
}

.conditions_check label> input[type="checkbox"]::before {
  content: "";
  display: inline-block;
  height: 1.25vw;
  width: 1.25vw;
  margin: 0 0.05vw 0 0;
  background-repeat: no-repeat;
  left: 0;
  top: 0.3vw;
}

.conditions_check  label>input[type="checkbox"]:checked::before {
  background-image: url('img/check_tablink.png');
  background-position: -2.6vw -0.4vw;
}

.conditions_check {
  display: inline-block;
  height: 2.5vw;
  width: 44vw;
  box-shadow: 0 0.0625vw 0.125vw rgba(0, 0, 0, .2);
  border-radius: 0.5vw;
  color: #170738;
  padding-left: 1vw;
  margin-top: 1vw;
}
<div class="conditions_check">
  <!-------- label > input > span -------->
  <label for="conditions_check_telega1">
  <input id="conditions_check_telega1" type="checkbox" checkbox hidden>
  <span>The user must be subscribed to the chanal</span>
  </label>
</div>
<div class="conditions_input">
  <input type="text">
</div>
<div class="conditions_check">
  <label for="conditions_check_telega2"> 
 <input id="conditions_check_telega2" type="checkbox" checkbox hidden>
 
  <span>The user must have at least X subscribers</span> </label>
</div>
<div class="conditions_input">
  <input type="text">
</div>
<div class="conditions_check">
  <label for="conditions_check_telega3">
   <input id="conditions_check_telega3" type="checkbox" checkbox hidden>
  <span>The user should repost a tweet with a hashtag</span></label>
</div>
<div class="conditions_input">
  <input type="text">
</div>

1
  • Спасибо, работает, правда с label я не понял, почему так, если я в лейбел добавляю span весь текст пытается уместиться в 30px, потому что именно размер чекбокса 30px на 30px. 3 авг 2018 в 14:22
0

Второй вариант. А почему бы не перенести и так скрытый checkbox к input'y, все равно ведь его ни кно не видит, считай его нет. Так мы снова избавимся от скриптов

.checkbox:checked ~ input {
  display: none;
}
<div class="conditions_check">
  <label for="conditions_check_telega1">
  <span>The user must be subscribed to the chanal</span></label>
</div>
<div class="conditions_input">
  <input class="checkbox" id="conditions_check_telega1" type="checkbox" hidden>
  <input type="text">
</div>
<div class="conditions_check">
  <label for="conditions_check_telega2">
  <span>The user must have at least X subscribers</span></label>
</div>
<div class="conditions_input">
  <input class="checkbox" id="conditions_check_telega2" type="checkbox" hidden>
  <input type="text">
</div>
<div class="conditions_check">
  <label for="conditions_check_telega3">
  <span>The user should repost a tweet with a hashtag</span></label>
</div>
<div class="conditions_input">
  <input class="checkbox" id="conditions_check_telega3" type="checkbox" hidden>
  <input type="text">
</div>

1
  • Потому что это ломает саму конструкцию скрытый чекбокс+лейбол, я добавил стилизацию, которую сперва не добавил, сожалею о своем поступке 3 авг 2018 в 13:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.