Question

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

HTML：

Type here:<input type="text" id="gname">
Type here:<input type="text" id="gname2">
Select:<select id="gname3">
  <option value="" style="display:none;"></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

<div id="number">
  Test 
</div>

JQuery的：

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

CSS：

<style>
  #number { display: none; height: 100px; border: solid 1px #ddd; }
</style>

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

如果您无法使用表单验证或想要其他（可能更易于阅读）的方法，您可以执行以下操作...

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

<强>的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

您可以尝试使用以下方法验证表单是否脏：

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);
    });
});

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

4 个答案: