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

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

将显示更改为“阻止”而不是“内联”将会起到作用。

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

Answer 2

它看起来像是一个Webkit（在Safari或Chrome中无法运行），它会显示内联div。 C＆C的区块显示为＆＃34;＆＃34;它只有0宽度和高度。我不确定规范中关于内联div的内容，但它们并不是传统的。如果您使用block而不是inline，则可以使用。

（编辑删除，这是错误的。）

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

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

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

如果您按特定顺序选择，则JavaScript切换复选框会中断（Mind Blowing！）

2 个答案: