Question

我正在尝试使用javascript单击以显示必填字段。我的表格很大，在表格的里面有一些必填字段。想法是要有一个按钮，以便用户可以单击（如切换）并仅查看必填字段？

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

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {} else document.getElementById('ifYes').remove();
}

<button onclick="javascript:yesnoCheck();" id="yesCheck">Click</button>
<div id="ifYes">
  <input type="text" name="usrname" required>
</div>
<div>
  <input type="text" name="company" required>
</div>

最好的方法是什么？

Answer 1

如果您确实要切换可选字段，则可以仅隐藏表单中的所有可选元素（如本例所示）。

请记住，您可能希望更改css选择器以更好地控制要隐藏的元素。

例如：

form input:not([required]),
form select:not([required]),
form textarea:not([required]), ....

您可能还希望不仅隐藏这些字段，而且以不同的方式设置样式（不透明度或类似的东西）。

function toggleOptionalFields() {
  document.querySelectorAll('form > :not([required])').forEach(field => field.hidden = !field.hidden);
}

<form>
  <input required value="i am required" />
  <input />
  <select required>
    <option value="1">required! :)</option>
  </select>
  <input />
  <input />
  <input required value="i am required too" />
</form>

<button onclick="toggleOptionalFields()">Toggle optional fields</button>

此外，由于不支持querySelectorAll().forEach和箭头功能，该功能在IE中也不会。

您可以通过使用常规函数而不是箭头函数来轻松更改它，并通过元素列表（例如for(;;)或[].forEach.call(document.querySelectorAll(), function(element) {...});，...）进行不同的迭代。

Answer 2

如果您要使用javascript进行操作，那么这里是一个简单的解决方案

JavaScript

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

CSS

#ifYes{
    display: block;
}

Answer 3

您可以将所有字段包装在容器中，例如<div>或<form>

HTML

<div class="container">
  <input required />
  <input />
  <input required />
</div>

然后您的切换按钮功能应在容器中切换一个类

JavaScript

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

现在，如果容器具有类only-required

，则可以使用CSS隐藏非必填字段

CSS

.container.only-required input:not([required]) {
  display: none;
}

Answer 4

您可以使用布尔变量并切换其值，然后基于该变量显示或隐藏您的元素。

var toggleIfYes=false;
    function yesnoCheck() {
toggleIfYes=!toggleIfYes
      if (toggleIfYes) {
         //show the elements
     } else{
         //hide the elements
      }
}

<button onclick="javascript:yesnoCheck();" id="yesCheck">Click</button>
<div id="ifYes">
  <input type="text" name="usrname" required>
</div>
<div>
  <input type="text" name="company" required>
</div>

Answer 5

通过单击按钮显示和隐藏可选字段

function toggleOptional(event){

  var button = event.currentTarget;
  
  var action = button.getAttribute('data-action');
  
  //var optionalFields =  document.querySelectorAll("form input:not([required])");
  
  var optionalFields =  document.querySelectorAll("form :not([required])");
  
  
  if(action == "hide"){
  
      optionalFields.forEach(function(value){
        value.style.display = "none";
      });
    
      button.setAttribute('data-action','show');
      
      button.innerText = "Show  Optional ";
  
  } else {
  
     optionalFields.forEach(function(value){
        value.style.display = "inline-block";
      });
    
      button.setAttribute('data-action','hide');
      
      button.innerText = "Hide Optional";
  }

}

input,textarea,select {
  width : 70vw;
}

<button onclick="toggleOptional(event)" data-action="hide"  >Hide Optional</button>


<form>


    <input type="text" name="usrname" placeholder="usrname" required>
    
    
    <input type="text" name="phone" placeholder="phone" required >
     
    <input type="text" name="company" placeholder="company" >
    
    <select  name="birthyear" required  >
      <option value="">Select Year of Birth</option>
      <option value="1992">1992</option>
      <option value="1993">1993</option>
    </select>
    
    <textarea required name="description" placeholder="description" ></textarea>

</form>

Answer 6

您正在使用document.getElementById('ifYes').remove()从DOM中删除该元素。这样，当您再次单击切换按钮时，将无法恢复元素。另外，您正在验证<button/>元素是否好像是<input type="checkbox" />，所以您可能想使用复选框。

最好使用document.getElementById('ifYes').style.display = 'none'，因为它最适合这种情况：

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.display = 'none';
  } 
  else {
    document.getElementById('ifYes').style.display = '';
  }
}

<input type="checkbox" onclick="javascript:yesnoCheck();" id="yesCheck">Click</input>
<div id="ifYes">
  <input type="text" name="usrname" required>
</div>
<div>
  <input type="text" name="company" required>
</div>

使用Java单击显示必填字段

6 个答案: