onclick 单选按钮显示/隐藏内容

Question

现在我在JSP页面中具有功能：当“是”单选按钮时，将其显示跨度（此功能完美地工作）。

<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

您必须将 onclick 与单选元素绑定。

var radioBtn = document.getElementsByName('test');

for (var i = 0, len = radioBtn.length; i < len; i++) {
  radioBtn[i].onclick = function() {

    if (this.value === 'Y') {
      document.getElementById('testing').style.visibility = "visible";    
    } else {
      document.getElementById('testing').style.visibility = "hidden";
    }

  }
}

Answer 2

试试这个

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>