Блог

Главная - Вопросы по программированию - CSS — показывать div, когда установлен флажок select

CSS — показывать div, когда установлен флажок select

#html #css #twitter-bootstrap-3 #css-selectors

#HTML #css #twitter-bootstrap-3 #css-селекторы

Вопрос:

Я пытаюсь показать div, когда один из выбранных в группе отмечен, и скрыть, когда нет. Я думал, что это должно сработать, но это не работает.

https://jsfiddle.net/47ctm349/2/

 #form-group-osobko {
  display: none;
}

#odber-1:checked #form-group-osobko {
  display: block;
}  
 <!-- Multiple Checkboxes -->
<div class="form-group">
  <label class="col-md-4 control-label" for="odber">Způsob platby</label>
  <div class="col-md-4">
    <div class="checkbox">
      <label for="odber-0">
        <input type="checkbox" name="odber" id="odber-0" value="1"> Dobírka
      </label>
    </div>
    <div class="checkbox">
      <label for="odber-1">
        <input type="checkbox" name="odber" id="odber-1" value="2"> Hotově při osobním odběru
      </label>
    </div>
    <div class="checkbox">
      <label for="odber-2">
        <input type="checkbox" name="odber" id="odber-2" value="3"> Platba předem na účet
      </label>
    </div>
  </div>
</div>

<!-- Text input-->
<div class="form-group" id="form-group-osobko">
  <label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
  <div class="col-md-4">
    <input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
    <span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
  </div>
</div>

Это должно сработать, когда вы нажмете флажок посередине, id="form-group-osobko" должен появиться div.

Я пытался не использовать JS с моим bootstrap.

Не могу понять, что я делаю неправильно: (

Спасибо.

Комментарии:

1. Divs не являются ни братьями, ни дочерними элементами входных данных, поэтому нет метода CSS для этого на основе вашей текущей strcuture.

Ответ №1:

Ваше решение работает только в том случае, если отображаемый div является смежным аналогом ввода флажка, поскольку именно это означает селектор в CSS.

Если этот div не является ни родственным, ни дочерним, вы не можете выбрать его с помощью CSS и должны будете использовать JavaScript.

 #form-group-osobko {
  display: none;
}
#odber-1:checked #form-group-osobko {
  display: block;
}  
 <!-- Multiple Checkboxes -->
<div class="form-group">
  <label class="col-md-4 control-label" for="odber">Způsob platby</label>
  <div class="col-md-4">
    <div class="checkbox">
      <label for="odber-0">
        <input type="checkbox" name="odber" id="odber-0" value="1">Dobírka
      </label>
    </div>
    <div class="checkbox">
      <label for="odber-1">
        <input type="checkbox" name="odber" id="odber-1" value="2">Hotově při osobním odběru

        <!-- Text input-->
        <div class="form-group" id="form-group-osobko">
          <label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
          <div class="col-md-4">
            <input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
            <span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
          </div>
        </div>

      </label>
    </div>
    <div class="checkbox">
      <label for="odber-2">
        <input type="checkbox" name="odber" id="odber-2" value="3">Platba předem na účet
      </label>
    </div>
  </div>
</div>

Здесь было бы простое решение jQuery, использующее только дополнительный класс для отображения div:

 $('#odber-1').change(function(){
  $('#form-group-osobko').toggleClass("active");
});  
 #form-group-osobko {
  display: none;
}
#form-group-osobko.active {
  display: block;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Multiple Checkboxes -->
<div class="form-group">
  <label class="col-md-4 control-label" for="odber">Způsob platby</label>
  <div class="col-md-4">
    <div class="checkbox">
      <label for="odber-0">
        <input type="checkbox" name="odber" id="odber-0" value="1">Dobírka
      </label>
    </div>
    <div class="checkbox">
      <label for="odber-1">
        <input type="checkbox" name="odber" id="odber-1" value="2">Hotově při osobním odběru
      </label>
    </div>
    <div class="checkbox">
      <label for="odber-2">
        <input type="checkbox" name="odber" id="odber-2" value="3">Platba předem na účet
      </label>
    </div>
  </div>
</div>

<!-- Text input-->
<div class="form-group" id="form-group-osobko">
  <label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
  <div class="col-md-4">
    <input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
    <span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
  </div>
</div>

Комментарии:

1. О, это действительно имеет смысл. Спасибо.

Ответ №2:

Получить его https://jsfiddle.net/47ctm349/5 /

Я только что добавил Javascript, используя Jquery. Это работает для любого div в любом месте:

 $('#odber-0').on('change', function(){
if($('#odber-0').is(':checked'))
        $("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});

$('#odber-1').on('change', function(){
if($('#odber-1').is(':checked'))
        $("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});

$('#odber-2').on('change', function(){
if($('#odber-2').is(':checked'))
        $("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});

В вашем случае нет идей с CSS.
Удачи!