javascript - 单击单选按钮显示/隐藏内容

Question

现在我在jsp页面中有一个功能:当选择"is"单选按钮并保存表单时，它会显示span(此功能完美运行)。

<s:if test="%{test ==Y}" > 
    //displaying span

但现在我有一个新的要求，当人们尝试更新表单时，如果他们没有选择单选按钮，则跨度应该消失，反之亦然。我尝试用 JS 执行此操作，但它没有触发任何事件。请帮助我，当他们单击是/否单选按钮时，我必须隐藏/显示跨度

function bet() {
    var test_1 = document.getElementsByName('test');
    if (test_1[0].checked) {
        document.getElementById('testing').style.visibility = "visible";
    }
    if (!test_1[0].checked) {
        document.getElementById('testing').style.visibility = "hidden";
    }
}

Yes<input type="radio" name="test" title="yes" onClick="bet()" value="Y">
No<input type="radio" name="test" title="NO" onClick="bet()" value="N">

<span id="testing">This is a test</span>

Answer 1

试试这个

document.addEventListener('DOMContentLoaded', function(){
  // get radio options
  var options = document.getElementsByName('test'),
      // ref content
      content = document.getElementById('testing'),
      // ref content display prop
      originalDisplayStyle = content.style.display;

  options.forEach(function(option){
    // listen for onclick event
    option.addEventListener('click', function(){
      var display = this.value === 'N' && this.checked ? 'none' : originalDisplayStyle;
      // hide/show content based on selection
      content.style.display = display;
    });
  });
});

Yes<input type="radio" name="test" title="yes" value="Y">
No<input type="radio" name="test" title="NO" value="N">


<span id="testing">This is a test</span>