Javascript 如何在单击复选框时显示多个div

当我点击复选框，然后显示div元素和 当我取消选中复选框，然后隐藏div元素时，我也会这样做。 在下面的代码中，我尝试的是它在功能上运行良好

但是，当我单击复选框1和复选框2时，然后单击div元素显示（show）覆盖

这是我的代码，我可以尝试这样做

我期望的结果是像这样的图片链接

有什么帮助吗？非常感谢

函数添加日期（e）{
document.getElementById（e.value）.style.display=e.checked？“首字母”：“无”；
}

1.
2.
3.
4.
5.
6.
7.
一些内容1
一些内容2
一些内容3
一些内容4
一些内容5
一些内容
一些内容

函数添加日期（e）{
document.getElementById（e.value）.style.display=e.checked？“首字母”：“无”；
}

1.
2.
3.
4.
5.
6.
7.
一些内容1
一些内容2
一些内容3
一些内容4
一些内容5
一些内容
一些内容

函数添加日期（e）{
document.getElementById（e.value）.style.display=e.checked？“首字母”：“无”；
}

.row{
右边距：20px！重要
}

1.
2.
3.
4.
5.
6.
7.
一些内容1
一些内容2
一些内容3
一些内容4
一些内容5
一些内容
一些内容

从

.container

中的每个div中删除

.row

类。因为

行

类包含弹性规则，以及

margin right:-15px

和

margin left:-15px

这会使文本重叠，请添加一个解释，说明您做了什么以及为什么您的解决方案有效。@Rajdip Busa对此表示感谢，我还想在复选框图标之间留出空间，我们如何做只需在复选框中添加边距我在这里添加边距，但不会发生您能给我看吗bcz我没有做到这一点，我现在只是增加了保证金检查