Javascript 如何在keyup上显示表单字段

我已经在这方面工作了好几个星期了，但我似乎没有掌握这个窍门。我试图仅在输入之前的字段时显示隐藏字段。下面是我的示例代码：

HTML

剧本

$(document).ready(function () {
$('#group1').find('input[type="text"]').keyup(function () {
    CheckSubmit();
});
    function CheckSubmit() {
        var x = true;
        $('#group1').find('input[type="text"]').keyup(function () {
            if ($(this).val().length === 0) {
                x = false;
                return;
            }
        });

    if (x) {
        $('#group2').css('visibility', 'visible');
        $('#group3').css('visibility', 'visible');
    } else {
        $('#group2').css('visibility', 'hidden');
        $('#group3').css('visibility', 'hidden');
    }
        CheckSubmit();
});

---

我不确定我做错了什么。有人能帮忙吗？

我把你的代码改了一点。我将相关的选择器存储在变量中，因此您不需要在每次发生更改时进行大量的重新查询

以下是更新的代码：

JavaScript

var inputs = $('#group1').find('input[type="text"]');
var hidden = $('#group2, #group3');

inputs.keyup(function() {
    var test = true;

    inputs.each(function(key, value) {
        if (!$(this).val().length) {
            test = false;
            return false;
        }
    });

    hidden.css('visibility', ( test ? 'visible' : 'hidden' ) );
});

演示

---

您可以通过检查当前div中的输入使其更加动态，如果它们都有值，则显示下一个div（如果有）

如果清除某个值，则隐藏所有后面的div

$(document).ready(function() {
    // you can restrict this to inputs in a specific div or just any input
    $('#group1 input').on('keyup', function () {
        var parentDiv = $(this).closest('div')
        var hasValues = parentDiv.find('input').filter(function() {
            return this.value == '';
        }).length == 0;

        if(hasValues) {
            //parentDiv.next().css('visibility', 'visible'); // show just the next section
            parentDiv.nextAll().css('visibility', 'visible'); // show all later sections
        } else {
            parentDiv.nextAll().css('visibility', 'hidden');
        }
    });
});

---

我用溶液做了一支快速笔。它可能不是最漂亮的，但它完成了。基本上，在每个keyup事件中，我都会检查

#group1

的子项的值长度，如果它们的长度都大于0，我会在数组中更改一个标志。如果所有3个标志都为真，我将显示

#group2

---

希望它有帮助：D

如果我很好地理解了您的问题，您希望显示#group2/-3中的字段，如果前面字段中的所有字段都有值。使用一些data-*-属性（请参阅），您可以创建如下处理程序（如果您愿意：，包含更完整的示例）：

$（'[data nextgroup][type=text]'）。在（'keyup'，函数（e）上{
var fieldgroup=$（this.getAttribute（'data-group'））
，fields=fieldgroup.find（“[type=text]”）
，canshow=fields.length==
filter（函数（i，el）{return el.value.length；}）.length；
void（canshow&$（fieldgroup.attr（'data-nextgroup'））.fadeIn（）；
});
[数据隐藏]{
显示：无；
}

字段1：


字段2：


字段3：


字段4：


字段5：


字段6：


字段7：


字段8：


字段8：


我试过了，但是一旦你点击enter/submitCase 1，字段就会消失：如果你想在刷新设置值后执行代码，只需调用
inputs.trigger（'change'）与-case2类似：要防止发送表单，请使用以下命令：
$（'form'）.submit（函数（事件）{event.preventDefault（）；}）如图所示。谢谢，但这些字段没有设置值。这是一个示例，因此字段1将是名字，字段2将是姓氏，等等。请解释，您试图实现的目标，仍然不起作用。抱歉，不清楚。我想要一张表格，表格的各个部分被拆分。在输入组1中以前的字段之前，组2和3将保持隐藏状态。我之前已经将它设置为需要单击按钮才能访问表单其余部分的位置。我还有很多话要说。我想向你展示一些东西，我喜欢你的演示中的工作方式。如何让它同时显示两个隐藏的div？因此，在填充了div 1中的字段后，div 2和div 3将显示？只需将
parentDiv.next（）
更改为
parentDiv.nextAll（）
，即可获得所有后面的字段。谢谢，我应该告诉您这些字段没有设置值。这是一个示例，字段1将是名字，字段2将是姓氏，等等。我正在尝试这样做：但仅在键控时，没有按钮谢谢。你能在提交后将表单字段显示在哪里吗？这很简单。只需取出if语句和BAM之后的
else
子句！！你全完了，我拿出了else，它仍然藏在笔上。尝试用有用的变量名去掉cssplese name变量（x），这将使代码更具可读性。即使在测试代码中
var inputs = $('#group1').find('input[type="text"]');
var hidden = $('#group2, #group3');

inputs.keyup(function() {
    var test = true;

    inputs.each(function(key, value) {
        if (!$(this).val().length) {
            test = false;
            return false;
        }
    });

    hidden.css('visibility', ( test ? 'visible' : 'hidden' ) );
});

$(document).ready(function() {
    // you can restrict this to inputs in a specific div or just any input
    $('#group1 input').on('keyup', function () {
        var parentDiv = $(this).closest('div')
        var hasValues = parentDiv.find('input').filter(function() {
            return this.value == '';
        }).length == 0;

        if(hasValues) {
            //parentDiv.next().css('visibility', 'visible'); // show just the next section
            parentDiv.nextAll().css('visibility', 'visible'); // show all later sections
        } else {
            parentDiv.nextAll().css('visibility', 'hidden');
        }
    });
});

$('#group2').hide();
$('#group3').hide();

$('#group1').keyup(function() {

  var flags = {
    0: false,
    1: false,
    2: false
  }

  $('#group1 > input').each(function(i, ele) {
    if(ele.value.length !== 0)
      {
        flags[i] = true;

      }
  });

  if(flags[0] && flags[1] && flags[2])
    {
      $('#group2').show();
    }
});

$('#group2').keyup(function() {

  var flags = {
    0: false,
    1: false,
    2: false
  }

  $('#group2 > input').each(function(i, ele) {
    if(ele.value.length !== 0)
      {
        flags[i] = true;

      }
  });

  if(flags[0] && flags[1] && flags[2])
    {
      $('#group3').show();
    }
});