html – 选中复选框ID但在all复选框下显示div

概述我有一个包含20个复选框的表单. 我想在选中复选框时显示div的内容. 我得到了这样的结果 #toggle-content1 { display: none;}#mycheckbox1:checked~#toggle-content1 { display: block; height: 100px;}#toggle-content2 { display: none;} 我有一个包含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>

但是如果你尝试一下代码片段,你会注意到第一个复选框移动第二个(当打开div时),是否有办法将复选框留在一行并显示其他行的div？

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

解决方法 你可以尝试这样的事情：

.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 >  <input type="checkBox" name="mycheckBox" value="0">  <div >    0)This content should appear when the checkBox is checked  </div>  <input type="checkBox" name="mycheckBox" value="1">  <div >    1)This content should appear when the checkBox is checked  </div>  <input type="checkBox" name="mycheckBox" value="2">  <div >    2)This content should appear when the checkBox is checked  </div>  <input type="checkBox" name="mycheckBox" value="3">  <div >    3)This content should appear when the checkBox is checked  </div></div>

总结

以上是内存溢出为你收集整理的html – 选中复选框ID但在all复选框下显示div全部内容，希望文章能够帮你解决html – 选中复选框ID但在all复选框下显示div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。