如果用户隐藏字段，如何将隐藏的输入值更改为默认值？答案

【问题标题】：How to change the hidden input value to default if user hides the field?如果用户隐藏字段，如何将隐藏的输入值更改为默认值？
【发布时间】：2020-08-09 05:06:01
【问题描述】：

这里我有一个数字类型的输入字段。此输入字段最初是隐藏的。如果用户单击某个单选按钮，则会显示此输入。

此输入字段指定了 min max 和 default 值。我有两个单选按钮。当我单击自定义单选按钮时，它会显示输入数字字段，并且用户可能会在其中提供一些无效输入，因此即使用户通过单击单选按钮隐藏此输入，表单也会变得无效。

为了解决这个问题，如果输入字段被隐藏，我想清除输入数字字段并将其值设置为默认值1？

 <form action="">
     <label><input type="radio" value="all" onclick="javascript:chooseTableRows();" name="option" >All</label><br>
     <label><input id="custom" value="custom" type="radio" name="option" onclick="javascript:chooseTableRows();">Custom</label><br>
     <div id="rows" style="display:none;">
     <input type="number" name="rows" min="1" value="1" max="10" required></div>
      <button type="submit" >Submit</button>
   </form>

function chooseTableRows() {
    if (document.getElementById('custom').checked) {
        document.getElementById('rows').style.display = 'block';
    }
    else document.getElementById('rows').style.display = 'none';
}

【问题讨论】：

标签： javascript html

【解决方案1】：

在 else 中，只需将值重置为 1，如下所示。

function chooseTableRows() {
    if (document.getElementById('custom').checked) {
        document.getElementById('rows').style.display = 'block';
    }
    else {
        document.getElementById('rows').style.display = 'none';
        document.getElementsByName('rows')[0].value = 1;
    }

}

【讨论】：

【解决方案2】：

如果未选中自定义复选框，您只需在 else 条件中使用 .value 并将其设置为 1。

现场演示

function chooseTableRows() {
  //check box
  var row = document.getElementById('rows')
  //Number input
  var custInput = document.getElementById('number')
  //Check if custom is checked
  if (document.getElementById('custom').checked) {
    row.style.display = 'block';
  } else {
    row.style.display = 'none';
    custInput.value = 1; //set value to 1
  }
}

<form action="">
  <label><input type="radio" value="all" onclick="javascript:chooseTableRows();" name="option">All</label><br>
  <label><input id="custom" value="custom" type="radio" name="option" onclick="javascript:chooseTableRows();">Custom</label><br>
  <div id="rows" style="display:none;">
    <input type="number" id="number" name="rows" min="1" value="1" max="10" required></div>
  <button type="submit">Submit</button>
</form>

【讨论】：