输入重置为值答案

【问题标题】：Input Reset to value输入重置为值
【发布时间】：2016-06-22 19:27:27
【问题描述】：

目标

我正在尝试创建一个按钮，Onclick 将每个单独的值重置为每个单独输入值的原始值。

我在这里设置了一个 Codepen 示例： http://codepen.io/coryk/pen/QEGrXp

问题

当用户单击重置按钮时，它会重置，但它会重置为第一个输入值，我需要将其重置为每个单独的值。

这是我的代码：

HTML

   <tr>
      <td>Max Pumping Distance</td>
    <td>
        <input name="custom_coverage" class="input_green custom_coverage" id="max-pumping" type="number" value="44000">
    </td>
    <td>ft</td>
</tr>

<br/>
<tr>
    <td>Avg. Pumping Distance</td>
    <td>
        <input name="custom_coverage"  class="input_green custom_coverage"  id="avg-pumping-distance" type="number" value="30000">
    </td>
    <td>ft</td>
</tr>

<br/>
<tr>
    <td>Head Pressure</td>
    <td>
        <input name="custom_coverage"  class="input_green custom_coverage"  id="avg-pumping-distance" type="number" value="45000">
    </td>
    <td>ft</td>
</tr>
<br/>

<button id="reset">Reset</button>

JavaScript

//Reset to Default Input values 
var $input = $('.custom_coverage'),
    $reset = $('#reset')
$('#reset').data('default', $input.val() );

$reset.on('click', function() {
   $input.val($(this).data('default')); 
});

【问题讨论】：

您在寻找<button type="reset">..吗？
是否会重置每个输入值 Onclick？
这会将整个 form 重置为其初始状态。
您的 jQuery 是在文档就绪处理程序中还是在页面末尾？
您能否编辑 Codepen 示例以展示其工作原理？

标签： javascript jquery html

【解决方案1】：

您可以先为每个输入字段分配一个新属性并将原始值存储在那里，然后您可以执行以下操作：

$(document).ready(function () {


  $('#reset').on('click', function() {
     $('.custom_coverage').each(function () {
        var orgValue = $(this).attr('data-value');
      $(this).val(orgValue);
     });
  });
});

查看我的 jsfiddle 示例：https://jsfiddle.net/fictus/gusff8ep/

【讨论】：

【解决方案2】：

您需要单独设置每个输入：

$reset.on('click', function() {
  $input.each(function(i) {
    $(i).val($(i).data('default'));
  }); 
});

```

【讨论】：