Question

我想根据输入的数量显示输入框的数量。

我的代码不起作用

<input id="howmany" />
<div id="boxquantity"></div>

jQuery / JavaScript

$(function() {
    $('#howmany').change(function(){
        for(i=0; i < $("#howmany").value; i++)
        {
            $('#boxquantity').append('<input name="boxid[]" type="file" id="boxid[]" size="50"/>'); 
        }
    });
});

Answer 1

我认为代码的问题是在jquery对象上使用.value。我将$（“＃howmany”）。value 替换为$（“＃howmany”）。val（）

我还添加了删除功能，以清除显示的输入数量。

运行摘要，谢谢

$(document).ready(function() {
  $('#howmany').change(function() {
    $("#boxquantity input").remove();
    
    for (i = 0; i < $("#howmany").val(); i++) {
      $('#boxquantity').append('<input name="boxid['+i+']" type="file" id="boxid['+i+']" size="50"/>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="howmany" />
<div id="boxquantity"></div>

Answer 2

将value替换为val。您可以将$("#howmany").value替换为$(this).val()。同样，每个输入都应具有唯一的id

$(function() {
  $('#howmany').change(function() {
    for (let i = 0; i < $(this).val(); i++) {
      $('#boxquantity').append('<input name="boxid[]" type="file" id="boxid[]_' + i + '" size="50"/>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="howmany" />
<div id="boxquantity"></div>

Answer 3

第一：使用type="number"作为输入

2nd：实时使用on('input',)代替.change事件 .change的工作方式类似于.on('blur' ,)

第3次：使用.val()代替.value

4th：您需要在更改数字时重置#boxquantity div ..对我来说，最好将输入html保存为变量，然后使用.html()而不是.append() ..或者您可以在for循环之前使用$('#boxquantity').html('');

$(document).ready(function() {
  $('#howmany').on('input',function() {
    var Inputs = '';
    for (var i = 0; i < $("#howmany").val(); i++) {
      Inputs += '<input name="boxid[]" type="file" size="50"/>';
    }
    $('#boxquantity').html(Inputs);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="howmany" />
<div id="boxquantity"></div>

Answer 4

工作代码，没有jQuery。

将HTML内置到变量中，然后一次性将其附加到DOM。

var boxes = "";

document.getElementById("howmany").onchange = function() {
  boxes = "";
  var howmany = document.getElementById("howmany").value;
  for(i=0;i<howmany;i++) {
    boxes += '<b>File ' + i + '</b>: <input type="file" id="box' + i + ' name="box' + i + ' /><br/>';
  }
  console.log(boxes);
  document.getElementById("boxquantity").innerHTML = boxes;
}

这里是JSBin link。

输入数字并根据输入的数字显示输入字段

4 个答案: