HTML - 当您选中一个复选框时，是否有可能取消选中其他所有复选框？

Question

基本上我正在用纯CSS构建一个图库。当我点击图片1时，它将检查复选框1并显示div1。我已经做到了这一点，问题是，如果我点击图片2，div2将出现，但如果我再次点击图片1，div1将不会出现，因为div2在其前面。

HTML：

<div class="gallery">
<label for="toggle1"><a>1</a></label>
<input id="toggle1" type="checkbox">
<label for="toggle2"><a>2</a></label>
<input id="toggle2" type="checkbox">
<label for="toggle3"><a>3</a></label>
<input id="toggle3" type="checkbox">
<label for="toggle4"><a>4</a></label>
<input id="toggle4" type="checkbox">
<label for="toggle5"><a>5</a></label>
<input id="toggle5" type="checkbox">
<label for="toggle6"><a>6</a></label>
<input id="toggle6" type="checkbox">
<label for="toggle7"><a>7</a></label>
<input id="toggle7" type="checkbox">
<label for="toggle8"><a>8</a></label>
<input id="toggle8" type="checkbox">
<div class="conteudo1">1</div>
<div class="conteudo2">2</div>
<div class="conteudo3">3</div>
<div class="conteudo4">4</div>
<div class="conteudo5">5</div>
<div class="conteudo6">6</div>
<div class="conteudo7">7</div>
<div class="conteudo8">8</div>
</div>

我不会发布CSS代码，因为我找不到自动缩进代码的方法，但您可以在此处查看它：http://jsfiddle.net/blackice856/3vhCH/1/ 基本上我需要的是当复选框1被选中时，取消所有其他复选框的选中，并重复执行所有其余复选框。

我从未特别喜欢JavaScript，但我刚刚用它完成了这个任务，只花了我大约10分钟，但我仍然想知道是否有任何其他方法。

谢谢你花时间读这篇文章(:

- Bruno Tavares

---

如果你只想让用户同时选择一个选项，为什么不使用单选按钮？ - mu is too short

我尝试使用单选按钮，但它们能够正常工作的唯一方法是为它们所有的按钮设置相同的名称。正如您在示例中所看到的，我需要它们具有不同的名称，以便在选中时执行不同的操作。 - Bruno Tavares

操作，实际上它运行得非常好！我不知道单选按钮可以有一个名称和一个ID。它们可以有不同的ID，相同的名称，我只是给了它们相同的名称，现在它可以工作了！感谢您的时间 (: http://jsfiddle.net/blackice856/3vhCH/3/ - Bruno Tavares

@BrunoTavares 如果您解决了问题，请写一个答案而不是评论。同时，因为没有自动缩进而不发布您的CSS也是无效的。使用一个好的编辑器吧 ;) （JSFiddle有一个整理选项）。最后，请避免在问题标题中使用标签，或者如果问题太广泛，则更自然地包含它。 - k0pernikus

Answer 1

是的。你需要编写一些Javascript代码来取消勾选其他选项框。实际上，HTML本身提供了类似的功能，就像mu is too short所说的那样。

- Jared Lindsey