填写完所有输入后如何显示div

当用户填写所有字段时，div应该显示。 如何引用三个输入选项，以便div仅在所有三个都有值时显示？

HTML：

Type here: Type here: Select:  Volvo Saab  
 Test  

JQuery的：

  $('#gname').bind('keyup change',function(){ if(this.value.length > 0){ $('#number').show(); } else { $('#number').hide(); } });  

CSS：

  #number { display: none; height: 100px; border: solid 1px #ddd; }  

Answer 1

根据你的例子

 $('input[type="text"], select').bind('keyup change',function(){ // get elements that are empty. var empty = $('input[type="text"], select').map(function(index, el) { return !$(el).val().length ? el : null; }).get(); // could also be placed outside of the function var number = $('#number'); // check if there are any empty elements, if there are none, show numbers, else hide number. !empty.length ? number.show() : number.hide(); }); 

这将遍历您的元素（在示例中提供）并检查这些元素是否具有空值。 然后它将返回一个空元素数组。

然后检查元素数组是否为空，显示数字，否则隐藏数字。

的jsfiddle

Answer 2

如果您不能使用表单validation或想要另一种（可能更容易阅读）的方法，您可以执行以下操作…

**注意：我更改了脚本以检测所选选项值的长度是否为零; 如果您的默认选项是空白值（并且已将禁用的属性设置为“已禁用”），则此操作将起作用。 有关完整示例，请参阅我的演示。

使用Javascript

 $('#gname').bind('keyup change', function(){ var show = true; // Check each child input for data. $(this).children('input').each(function(i){ if($(this).val().length==0){ show = false; }; }); // If no options are selected in the "Select" element, set [show] flag to false. if(($('#gname select :selected').length==0 || $('#gname select :selected').val().length==0)){ show = false; }; // Hide or show the necessary elements based on the [show] flag. if(show){ $('#number').show(); } else { $('#number').hide(); } }); 

编辑：我修复了JS小提琴指向更新的链接。

JS Fiddle DEMO

Answer 3

这样的事情应该可以解决问题。

 $('#gname').bind('keyup change', function(){ var show = true; for(child in $(this).children){ if(child.is(':empty')){ show = false; //Could break here if you want. } } if(show){ $('#number').show(); } else { $('#number').hide(); } }); 

Answer 4

您可以尝试validation表单是否脏了：

 String.prototype.hashCode = function() { var hash = 0; if (this.length == 0) return hash; for (i = 0; i < this.length; i++) { char = this.charCodeAt(i); hash = ((hash<<5) - hash) + char; hash = hash & hash; } return hash; }; $(function() { var $form = $('form'); $form.data('checksum', $form.serialize().hashCode()) $form.submit(function() { var initialChecksum = $(this).data('checksum'); var currentChecksum = $(this).serialize(); var isDirty = initialChecksum != currentChecksum; $('#isDirty').val(isDirty); }); });