在JavaScript中修改后，某些单选按钮不会保持选中状态

Question

这个问题最近出现了（特别是在Chrome中），我们的某些单选按钮没有被单击或必须多次单击才能保持选中状态。

以下是代码段（跳到最后一块代码）：

var createNetworkList = function(parent, ssid){
  var randToken = Math.random().toString(36).substring(2);
  var radio = document.createElement('input');
  radio.type = 'radio';
  radio.value = ssid;
  radio.id = ssid + randToken;
  radio.name = 'ssid';
  radio.className = 'radio radio-input' ;
  var parentDiv = document.createElement('DIV');

  var div = document.createElement('DIV');
  parentDiv.className = 'field';
  div.className = 'ui radio checkbox radio-div';
  div.appendChild(radio);
  var label = document.createElement('label');
  label.htmlFor = ssid;
  label.innerHTML = ssid;
  div.appendChild(label);
  parentDiv.appendChild(div)
  parent.appendChild(parentDiv);

  // HERE IS WHERE THE TROUBLE IS HAPPENING
  parentDiv.addEventListener('click', function(){
    this.firstElementChild.firstElementChild.checked = true
    debugger // when you type `this.firstElementChild.firstElementChild.checked` it says `true`
    return true
  })

};

首先，我确保它们都具有唯一的ID，但无效。接下来，我确保我的onclick最终返回了sometihng，但这也不起作用。我尝试了很多事情，但是这段代码一直工作很长时间，直到最近。修复程序应该有多复杂？

这是生成的HTML：

<div class="grouped fields" id="networks-div" style="display: block;">
  <div class="field" style="border-left: 1px solid gainsboro;">
    <div class="ui radio checkbox radio-div">
      <input type="radio" value="React-Wireless" id="React-Wirelessri99pzth88f" name="ssid" class="radio radio-input">
      <label for="React-Wireless">React-Wireless</label>
    </div>
  </div>
  <div class="field" style="border-left: 1px solid gainsboro;">
    <div class="ui radio checkbox radio-div">
      <input type="radio" value="Charzinder-9PGP" id="Charzinder-9PGPr5cm2bz0k1b" name="ssid" class="radio radio-input">
      <label for="Charzinder-9PGP">Charzinder-9PGP</label>
    </div>
  </div>
  <div class="field" style="border-left: 1px solid gainsboro;">
    <div class="ui radio checkbox radio-div">
      <input type="radio" value="Jhatka" id="Jhatkabg0vq1mfv5d" name="ssid" class="radio radio-input">
      <label for="Jhatka">Jhatka</label>
    </div>
  </div>
  <div class="field" style="border-left: 1px solid gainsboro;">
    <div class="ui radio checkbox radio-div">
      <input type="radio" value="ORDGuest" id="ORDGuestzg0qcdhv6k" name="ssid" class="radio radio-input">
      <label for="ORDGuest">ORDGuest</label>
    </div>
  </div>
  <div class="field" style="border-left: 1px solid gainsboro;">
    <div class="ui radio checkbox radio-div">
      <input type="radio" value="CharzinderWifi-Office-2.4G" id="CharzinderWifi-Office-2.4Gkfd9zl8hq" name="ssid" class="radio radio-input">
      <label for="CharzinderWifi-Office-2.4G">CharzinderWifi-Office-2.4G</label>
    </div>
  </div>
</div>