如果您按特定顺序选择，JavaScript Toggle Checkboxes 会中断（令人兴奋！）

Question

显然，可以按照您想要的任何顺序选择复选框，但我遇到了这个中断的问题。当我按以下顺序选择时，无法显示复选框 C：A-D-C 或 D-A-C。如果您选择按顺序或反向顺序，它可以正常工作，并且由于某种原因它总是在 Firefox 中工作。你可以查看这个异常Click here for weird fiddle。

这是为什么？我该如何解决？

HTML

<input type="checkbox" id="Abox" data-info-id="infoa">
<label for="Abox"> Checkbox A</label><BR>

<input type="checkbox" id="Bbox"  data-info-id="infob">
<label for="Bbox"> Checkbox B</label><BR>

<input type="checkbox" id="Cbox"  data-info-id="infoc">
<label for="Cbox"> Checkbox C</label><BR>

<input type="checkbox" id="Dbox" data-info-id="infod">
<label for="Dbox"> Checkbox D</label><BR>

 CHECK AN ITEM ABOVE IT SHOULD APPEAR BELOW<P>
 <div style="background-color:silver;">

 <div id="infoa">
 <input type="checkbox" id="kwd2"  >
 <label for="kwd2"> ALPHA</label><BR>
 </div>

 <div id="infob">
 <input type="checkbox" id="fff1">
 <label for="fff1"> BETA</label><BR>
 </div>

 <div id="infoc">
 <input type="checkbox" id="zzz3">
 <label for="zzz3"> CHARLIE</label><BR>
 </div>

  <div id="infod">
  <input type="checkbox" id="kwd5"  >
  <label for="kwd5"> DELTA</label><BR>
  </div>

  </div>

JAVASCRIPT

  document.addEventListener('change', function(e) {
  var id = e.target.getAttribute('data-info-id');
  var checked = e.target.checked;

  if (id) {
      var div = document.getElementById(id);
      if (div) div.style.display = checked ? 'inline' : 'none';
      alert("bang");
    }

  });

CSS

[id^="info"] {
display: none;
}

Answer 1

奇怪的错误，似乎与内联 -> 块 -> 内联 div 有关。

不过，将显示更改为“块”而不是“内联”就可以了。

if (div) div.style.display = checked ? 'block' : 'none';

Answer 2

它看起来像一个显示内联 div 的 Webkit（在 Safari 或 Chrome 中不起作用）错误。 C 的块是“显示的”，它只有 0 的宽度和高度。我不确定规范中关于内联 div 的内容，但它们不是传统的。如果你使用块而不是内联它可以工作。

（编辑删除，错了。）

编辑：这似乎是一个简单的浏览器重绘错误。你可以做内部部分

<span id="infoa">ALPHA<br></span><span id="infob"></span><span id="infoc">CHARLIE</span><span id="infod">DELTA</span>

它以同样的方式失败。未显示的#infob 之前的换行符似乎会触发#infoc 的显示问题。似乎应该向 Webkit 人员报告这件事。