html – CSS – 选中select时显示div

我正在尝试在检查组中的一个选项时显示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>

单击中间的复选框时应该可以使用div id =“form-group-osobko”.

我试图不用JS和我的bootstrap.

无法理解我做错了什么:(

谢谢.

解决方法

如果要显示的div是复选框输入的 adjacent sibling,那么您的解决方案才有效,因为这是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>