选中复选框 id 但在所有复选框下显示 div

Question

我有一个包含 20 个复选框的表单。

我想在选中复选框时显示 div 的内容。 我得到了这样的结果

#toggle-content1 {
  display: none;
}

#mycheckbox1:checked~#toggle-content1 {
  display: block;
  height: 100px;
}

#toggle-content2 {
  display: none;
}

#mycheckbox2:checked~#toggle-content2 {
  display: block;
  height: 100px;
}

<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<div id="toggle-content1">
  This content should appear when the checkbox is checked
</div>
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div id="toggle-content2">
  This content should appear when the checkbox is checked
</div>

但是如果你尝试一下代码 sn-p，你会注意到第一个复选框移动了第二个复选框（当打开 div 时），有没有办法将复选框留在一行中并显示 div在其他人身上？

css 世界对我来说是新的，有一种方法可以为 20 个复选框编写代码，而无需为每个 div 编写 css？

Answer 1

你可以试试这样的：

.content {
  display: none;
  width: 100%;
}

/*Use + to target only one .content*/
input[type=checkbox]:checked + .content {
  display: block;
  height: 50px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

input[type=checkbox] {
  order: -1; /*make all the input on the top*/
}

<div class="container">
  <input type="checkbox" name="mycheckbox" value="0">
  <div class="content">
    0)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="1">
  <div class="content">
    1)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="2">
  <div class="content">
    2)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="3">
  <div class="content">
    3)This content should appear when the checkbox is checked
  </div>
</div>

Answer 2

我只是重新排序了您的标签，先输入然后 div。但我不确定这就是你想要的

#toggle-content1 {
  display: none;
}

#mycheckbox1:checked~#toggle-content1 {
  display: block;
  height: 100px;
}

#toggle-content2 {
  display: none;
}

#mycheckbox2:checked~#toggle-content2 {
  display: block;
  height: 100px;
}

<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div id="toggle-content1">
  This content should appear when the checkbox1 is checked
</div>
<div id="toggle-content2">
  This content should appear when the checkbox2 is checked
</div>

http://jsfiddle.net/ScnQT/5539/

Answer 3

请查看下面更新的代码，希望您能找到解决方案。

.chkBox{
display:inline-block;
position:relative;
}

.chkTxt{
background:#fff;
padding:10px;
border:1px solid #ccc;
width:500px;
height:100px;
position:absolute;
top:100%;
left:0;
display:none;
}

.chkBox input[type="checkbox"]:checked + .chkTxt{
display:block;
}

<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
  <div class="chkTxt">This content should appear when the checkbox1 is checked </div>
</div>

<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
  <div class="chkTxt">This content should appear when the checkbox2 is checked </div>
</div>


<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox3" value="0" />
  <div class="chkTxt">This content should appear when the checkbox3 is checked </div>
</div>

<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox4" value="0" />
  <div class="chkTxt">This content should appear when the checkbox4 is checked </div>
</div>


<div class="chkBox">
  <input type="checkbox" name="mycheckbox" id="mycheckbox5" value="0" />
  <div class="chkTxt">This content should appear when the checkbox5 is checked </div>
</div>

Answer 4

我会为此使用脚本...在实际应用程序中，我会使用模型 + 模板引擎。 (Vue engine sample) 这样你就可以把你的输出放在你想要的任何地方，并按照你喜欢的格式进行格式化。这样，您还可以从服务器加载新的数据模型（将您的复选框问题/值/答案存储在 db somwhere 中），它会重绘/更新您的整个页面，而无需您进行任何更新。

// HTML
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="1" />
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="2" />
<input type="checkbox" name="mycheckbox" id="mycheckbox3" value="3" />
<input type="checkbox" name="mycheckbox" id="mycheckbox4" value="4" />
<div id="activeCheckboxes"></div><!-- you can put this anywhere on the page -->

// JavaScript
const checkboxes = {
  1: {checked: false, message: 'First checkbox checked'},
  2: {checked: false, message: 'Second checkbox checked'},
  3: {checked: false, message: 'Third checkbox checked'},
  4: {checked: false, message: 'Fourth checkbox checked'}
};
const activeCheckboxes = document.getElementById('activeCheckboxes');
const updateCheckboxes = () => {
    activeCheckboxes.innerHTML = '';
  Object.keys(checkboxes).forEach((val) => {
    let checkbox = checkboxes[val];
    if (checkbox.checked) {
        activeCheckboxes.innerHTML += '<div>'+checkbox.message+'</div><hr>';
    }
  });
};
$(document).ready(() => {
  $('input[type]="checkbox"').click((evt) => {
    checkboxes[evt.target.value].checked = evt.target.checked;
    updateCheckboxes();
  });
});

Sample Fiddle