javascript - 通过选中 javascript 中的单选框来隐藏/显示信息

Question

您好，我想了解如何通过在 javascript 中选中一个框（详细信息）来使详细信息 div 消失。 因为我尝试了很多方法，但没有结果::

  let myDetails = document.getElementById('myDetails');
  myDetails.checked = true;
  myDetails.addEventListener('change', togglemyDetails);

var togglemyDetails = function() {
}

标签： javascriptdom

Answer 1

为此，您需要一个要显示和隐藏的 div，然后是同一组中的两个单选按钮。如果将 onclick 事件附加到两个单选按钮，则可以查询选择了哪一个，然后相应地显示或隐藏原始 div：

function toggle() {
  let toggled = document.querySelector("#show").checked;
  if (toggled)
    document.querySelector("#show-hide").style.visibility = "visible";
  else
    document.querySelector("#show-hide").style.visibility = "hidden";
}

<div id="show-hide">Show and Hide</div>

<form>
  <div>
    <input type="radio" id="show" checked onclick="toggle()" name="group">
    <label for="show">Show</label>
  </div>
  <div>
    <input type="radio" id="hide" onclick="toggle()" name="group">
    <label for="hide">Hide</label>
  </div>
</form>