使用Javascript单击时显示所需字段

我试图用javascript在单击时显示必填字段。我有一个大的表单，表单里面有一些必填字段。这个想法是有一个按钮，让用户可以点击（如切换），并只看到所需的字段

到目前为止，我的方法是这样的：

函数yesnoCheck（）{
if（document.getElementById（'yesCheck'）.checked）{}else document.getElementById（'ifies'）.remove（）；
}

点击

如果您想在javascript中实现，那么这里有一个简单的解决方案

Javascript

function yesnoCheck() {
  var x = document.getElementById("ifYes");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function yesnoCheck() {
  let container = document.querySelector('.container')
  container.classList.toggle('only-required')
}

CSS

#ifYes{
    display: block;
}

---

如果您想在javascript中实现这一点，那么这里有一个简单的解决方案

Javascript

function yesnoCheck() {
  var x = document.getElementById("ifYes");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function yesnoCheck() {
  let container = document.querySelector('.container')
  container.classList.toggle('only-required')
}

CSS

#ifYes{
    display: block;
}

---

您可以在容器中包装所有字段，如

或

HTML

然后，您的toggle按钮函数应该在容器中切换一个类

Javascript

function yesnoCheck() {
  var x = document.getElementById("ifYes");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function yesnoCheck() {
  let container = document.querySelector('.container')
  container.classList.toggle('only-required')
}

现在，如果容器有一个类

仅为必需的

CSS

#ifYes{
    display: block;
}

.container.only-required输入：不（[必需]）{
显示：无；
}

您可以在容器中包装所有字段，如

或

HTML

然后，您的toggle按钮函数应该在容器中切换一个类

Javascript

function yesnoCheck() {
  var x = document.getElementById("ifYes");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function yesnoCheck() {
  let container = document.querySelector('.container')
  container.classList.toggle('only-required')
}

现在，如果容器有一个类

仅为必需的

CSS

#ifYes{
    display: block;
}

.container.only-required输入：不（[必需]）{
显示：无；
}

您使用的是从DOM中删除元素的

document.getElementById（'ifYes'）.remove（）

。这样，当再次单击切换按钮时，将无法恢复元素。此外，您正在验证一个

元素，就像它是一个

元素一样，因此您可能需要使用复选框来代替它

最好使用

document.getElementById（'ifies'）.style.display='none'

，因为它最适合这种情况：

函数yesnoCheck（）{
if（document.getElementById（'yesCheck'）。选中）{
document.getElementById（'ifies'）.style.display='none'；
} 
否则{
document.getElementById（'Ifies'）.style.display=''；
}
}

点击

您使用的是从DOM中删除元素的

document.getElementById（'ifYes'）.remove（）

。这样，当再次单击切换按钮时，将无法恢复元素。此外，您正在验证一个

元素，就像它是一个

元素一样，因此您可能需要使用复选框来代替它

最好使用

document.getElementById（'ifies'）.style.display='none'

，因为它最适合这种情况：

函数yesnoCheck（）{
if（document.getElementById（'yesCheck'）。选中）{
document.getElementById（'ifies'）.style.display='none'；
} 
否则{
document.getElementById（'Ifies'）.style.display=''；
}
}

点击

您可以获取布尔变量并切换其值，并基于它显示或隐藏元素

var-toggleIfYes=false；
函数yesnoCheck（）{
toggleIfYes=！toggleIfYes
如果（切换）{
//显示元素
}否则{
//隐藏元素
}
}

点击

您可以获取布尔变量并切换其值，并基于它显示或隐藏元素

var-toggleIfYes=false；
函数yesnoCheck（）{
toggleIfYes=！toggleIfYes
如果（切换）{
//显示元素
}否则{
//隐藏元素
}
}

点击

使用按钮单击显示和隐藏可选字段

功能切换可选（事件）{
var按钮=event.currentTarget；
var action=button.getAttribute（'data-action'）；
//var optionalFields=document.querySelectorAll（“表单输入：非（[必需]）”）；
var optionalFields=document.querySelectorAll（“表单：非（[必需]）”）；
如果（操作==“隐藏”）{
optionalFields.forEach（函数（值）{
value.style.display=“无”；
});
setAttribute（'data-action'，'show'）；
button.innerText=“显示可选”；
}否则{
optionalFields.forEach（函数（值）{
value.style.display=“内联块”；
});
setAttribute（'data-action'，'hide'）；
button.innerText=“隐藏可选”；
}
}

输入，文本区域，选择{
宽度：70vw；
}

Hide可选
选择出生年份
1992
1993

使用按钮单击显示和隐藏可选字段

功能切换可选（事件）{
var按钮=event.currentTarget；
var action=button.getAttribute（'data-action'）；
//var optionalFields=document.querySelectorAll（“表单输入：非（[必需]）”）；
var optionalFields=document.querySelectorAll（“表单：非（[必需]）”）；
如果（操作==“隐藏”）{
optionalFields.forEach（函数（值）{
value.style.display=“无”；
});
setAttribute（'data-action'，'show'）；
button.innerText=“显示可选”；
}否则{
optionalFields.forEach（函数（值）{
value.style.display=“内联块”；
});
setAttribute（'data-action'，'hide'）；
button.innerText=“隐藏可选”；
}
}

输入，文本区域，选择{
宽度：70vw；
}

Hide可选
选择出生年份
1992
1993

如果您真的想切换可选字段，您可以在表单中隐藏所有可选元素（如本例所示）

记住，于