可以再次更改RadioButtons再次显示

发布于 2025-02-12 20:20:44 字数 727 浏览 0 评论 0原文

我有一个带有3个radionbutton的容器，其中2个放射线室旁边有另一个radiobuttons，但它们的显示却没有。当我单击RadioButton时，我想显示隐藏的radiobuttons，当我单击另一个RadionButton时，我希望它再次显示为无。

`function showHiddenText() 
{
  if (document.getElementById("diger").checked) {
    const hiddenInput = document.getElementById("hidden-input");
    hiddenInput.style.display = "block";
  } else if (document.getElementById("diger").checked == false) {
    hiddenInput.style.display = "none";
  }
}`

我写的是一个简单的功能，但是如果部分不起作用。当我显示隐藏的无线电按钮时，它们不会再消失了。 radionbuttons hiddenpart

原文

i got a container with 3 radionbuttons and 2 of the radiobuttons have another radiobuttons next to them but their displays are none . When i click the radiobutton i wanna display the hidden radiobuttons and when i click another radionbutton i want it's display to be none again .

`function showHiddenText() 
{
  if (document.getElementById("diger").checked) {
    const hiddenInput = document.getElementById("hidden-input");
    hiddenInput.style.display = "block";
  } else if (document.getElementById("diger").checked == false) {
    hiddenInput.style.display = "none";
  }
}`

It's a simple function i write to do that but else if part is not working . When i display hidden radio buttons they dont disappear ever again.
radionbuttons
hiddenpart

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一杯敬自由 2025-02-19 20:20:44

const变量是块范围的。因此，在中，如果语句hidendInput是未定义的。

顺便说一下

function showHiddenText() 
{
  const hiddenInput = document.getElementById("hidden-input");
  if (document.getElementById("diger").checked) {
    hiddenInput.style.display = "block";
  } else if (document.getElementById("diger").checked == false) {
    hiddenInput.style.display = "none";
  }
}

，您可以通过语句用else替换else来使其更简单，

function showHiddenText() 
{
  const hiddenInput = document.getElementById("hidden-input");
  if (document.getElementById("diger").checked) {
    hiddenInput.style.display = "block";
  } else {
    hiddenInput.style.display = "none";
  }
}

或者更多：或更多：

function showHiddenText() 
{
  const hiddenInput = document.getElementById("hidden-input");
  if (document.getElementById("diger").checked) {
    hiddenInput.style.display = "block";
    return true; // you can return anything here
  }
  hiddenInput.style.display = "none";
  return false; // and here (it is not necessary to return here)
}

const variables are block scoped. So, in the else if statement hiddenInput is undefined.

Move it above the statements

function showHiddenText() 
{
  const hiddenInput = document.getElementById("hidden-input");
  if (document.getElementById("diger").checked) {
    hiddenInput.style.display = "block";
  } else if (document.getElementById("diger").checked == false) {
    hiddenInput.style.display = "none";
  }
}

By the way, you can make it simpler by replacing the else if statement with else:

function showHiddenText() 
{
  const hiddenInput = document.getElementById("hidden-input");
  if (document.getElementById("diger").checked) {
    hiddenInput.style.display = "block";
  } else {
    hiddenInput.style.display = "none";
  }
}

Or even more:

function showHiddenText() 
{
  const hiddenInput = document.getElementById("hidden-input");
  if (document.getElementById("diger").checked) {
    hiddenInput.style.display = "block";
    return true; // you can return anything here
  }
  hiddenInput.style.display = "none";
  return false; // and here (it is not necessary to return here)
}

回复收藏 0 原文

冰雪之触 2025-02-19 20:20:44

确保您的收音机按钮具有相同的名称。
比较具有相同名称的无线电按钮。
然后将OnClick =“ ShowHidDentext（）”添加到输入，然后：

html：

<input type="radio" name="btn" id="diger" onclick="showHiddenText()">
<input type="radio" name="btn" onclick="showHiddenText()">
<input type="radio" id="hidden-input">

js：：

function showHiddenText() {
  if (document.getElementById("diger").checked) {
    document.getElementById("hidden-input").style.display = 'block'
  }
  else{
    document.getElementById("hidden-input").style.display = 'none'
  }
}

Make sure your radio buttons have the same name.
Radio buttons with same name are compared to each other.
Add onclick="showHiddenText()" to inputs, then:

html:

<input type="radio" name="btn" id="diger" onclick="showHiddenText()">
<input type="radio" name="btn" onclick="showHiddenText()">
<input type="radio" id="hidden-input">

js:

function showHiddenText() {
  if (document.getElementById("diger").checked) {
    document.getElementById("hidden-input").style.display = 'block'
  }
  else{
    document.getElementById("hidden-input").style.display = 'none'
  }
}

回复收藏 0 原文

~没有更多了~