javascript从单选按钮选择中显示/隐藏HTML元素

3hvapo4f 于 2023-04-04 发布在 Java

关注(0)|答案(2)|浏览(162)

我在一个名为“PersBus”的组中有3个单选按钮，我试图使用它们来选择在注册表单上显示的内容。值1 =个人，值2 =商业，值3 =两者。所以，对于“1”，我只想显示个人注册的表单，等等。我是js和js的新手
我确实在这里和w3Schools上搜索了很多才走到这一步，但没有骰子。
我可以让警报像预期的那样触发，但我似乎不能让“grdPersonal”显示/隐藏。我也试过.style.visibility可见/隐藏，没有运气。
我错过了什么？有更好的办法吗？

function handleClick(PersBus) {
  var x = PersBus.value;
  var y = document.getElementById("grdPersonal");
  if (x === "1") {
    alert(x);
    y.style.display = "none";
  } else {
    alert(x);
    document.getElementById("grdPersonal").style.display = 'none';
  }

}

<div class="item1">
  <asp:RadioButton ID="radPersonal" runat="server" GroupName="PersBus" Checked="true" onclick="handleClick(this);" value="1" />
</div>
<div class="item2">
  <asp:RadioButton ID="radBusiness" runat="server" GroupName="PersBus" onclick="handleClick(this);" value="2" />
</div>
<div class="item3">
  <asp:RadioButton ID="radBoth" runat="server" GroupName="PersBus" onclick="handleClick(this);" value="3" />
</div>

Html

来源：https://stackoverflow.com/questions/75874995/javascript-display-hide-html-element-from-radio-button-selection

2条答案

按热度按时间

5jvtdoz21#

如注解中所述，您正在隐藏（显示：无）两种情况下的元素。

function handleClick(PersBus) {
  var x = PersBus.value;
  var y = document.getElementById("grdPersonal");
  if (x === "1") {
    alert(x);
    y.style.display = "none";
  } else {
    alert(x);
    y.style.display = 'block'; //change this
  }

}

赞(0）回复(0）举报 2023-04-04

5cg8jx4n2#

好了。我终于弄明白了。我的“grdPersonal”元素有一个runat="server"属性，导致它在元素创建之前调用函数，这就是为什么我得到了“无法读取null的属性”
谢谢大家的帮助。一直在学习。

赞(0）回复(0）举报 2023-04-04