如何使用纯JavaScript而非jQuery实现点击单选按钮显示div区块

问题原因 #

你的代码存在变量引用错误：你已经将id为gridRadios1的「是」单选按钮赋值给了变量yes，但判断条件里错误使用了从未定义的变量option1，导致判断逻辑失效，无法正常切换区块的显示状态。

修正方案 #

仅需要修改JavaScript部分的判断变量名即可，HTML代码无需调整：

function selectFunction() {
  var yes = document.getElementById("gridRadios1");
  var current_school_details = document.getElementById("current_school_details");
  // 将原代码的option1改为已定义的变量yes
  if (yes.checked === true) {
    current_school_details.style.display = "block";
  } else {
    current_school_details.style.display = "none";
  }
}

补充提示：如果你的单选按钮默认选中了「是」，可以在JS代码末尾加一行selectFunction()，页面加载后就会自动显示对应区块，不需要用户再点击一次触发。

内容的提问来源于stack exchange，提问作者Dee