html - 在 div 中使用选中的选择器

Question

由于我不是 CSS 或 bootstrap 专家，我请求帮助以了解 CSS“已检​​查”用法的副作用。

我有以下简单的 HTML 代码:

<input type="radio" id="check1" name="mychoice" value="bechoice1">
<label for="check1" class="side-label">Mon choix 1</label>
<br/>

<input type="radio" id="check2" name="mychoice" value="bechoice2">
<label for="check2" class="side-label">Mon choix 2</label>
<br/>

<input type="radio" id="check3" name="mychoice" value="bechoice3">
<label for="check3" class="side-label">Mon choix 3</label>
<br/>

<div class="ischoiceno1" >Content n° 1</div>
<div class="ischoiceno2" >Content n° 2</div>
<div class="ischoiceno3" >Content n°3</div>

我将它与此 CSS 代码一起使用:

.ischoiceno1, .ischoiceno2, .ischoiceno3 {
  display: none;
  margin: 10px 0 0 35px;
  border-width:1px;
  border-style:dashed ;
  border-color:#33ae74;
  font-size: 12pt;
}
#check1:checked ~ .ischoiceno1 {  display: block;}
#check2:checked ~ .ischoiceno2 {  display: block;}
#check3:checked ~ .ischoiceno3 {  display: block;}

而且这段代码在旧版本的网站上运行良好。 重写整个应用程序，我现在使用 bootstrap 作为 CSS 框架。

仅此代码仍在运行。 但是当我在 div 中包含初始输入时，这是行不通的。 由于我的目标是将这些代码包含在“form-group”或“row”divs 中，显然它不会运行。

我需要更改什么？我假设我必须在 CSS 中自定义代码。

Answer 1

您正在使用的 ~ 选择器称为 general sibling combinator

#check1:checked ~ .ischoiceno1 { display: block;} 将选择每个带有类 .ischoiceno1 的元素，该元素前面是选中的 #check1 元素。

如果将所有输入元素放在一个容器 div 中，该逻辑将不再起作用(它不适用于嵌套元素)。我想不出纯 CSS 解决方案。我认为 javascript 解决方案是解决问题的方法。

$(function() {
  // watch for changes in the selection
  $("input[name='mychoice']").change(radioSelectionChanged);
});

// function that is called when selection changes
function radioSelectionChanged(){
  // hide all elements
  $('.choice').hide();
  // show only the selected one
  $('#'+$(this).val()).show();
}

.choice {
  display: none;
  margin: 10px 0 0 35px;
  border-width:1px;
  border-style:dashed ;
  border-color:#33ae74;
  font-size: 12pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radioContainer">
  <input type="radio" id="check1" name="mychoice" value="bechoice1"> <label for="check1" class="side-label">Mon choix 1</label><br/>
  <input type="radio" id="check2" name="mychoice" value="bechoice2"> <label 
  for="check2" class="side-label">Mon choix 2</label><br/>
  <input type="radio" id="check3" name="mychoice" value="bechoice3"> <label for="check3" class="side-label">Mon choix 3</label><br/>
</div>


<div class="choice" id="bechoice1" >Content n° 1</div>
<div class="choice" id="bechoice2" >Content n° 2</div>
<div class="choice" id="bechoice3" >Content n°3</div>