Question

我有一个带有几个输入字段的表单，我只想在所有输入字段获得内容时显示div，当其中一个输入字段没有内容时div应该再次消失。

我使用了一个输入字段，但是如何在填写所有输入字段时让它工作（不知道它是否是一个很好的清洁方式？）：

$(function () {    
$('input').change(function() {
$('.next').toggle($(this).val().length !== 0);
}); });

小提琴：
http://jsfiddle.net/uQyH9/19/

Answer 1

试试这个：http://jsfiddle.net/uQyH9/21/

$(function () {   
    var _cached=$('input');

    _cached.change(function() {
        if (_cached.filter(function (){return $(this).val().length }).length==_cached.length)
        $('.next').show();
         else
        $('.next').hide();

    });
});

Answer 2

您可以使用filter函数检查所有输入是否已填充。

代码：

    $(function () {
        $('input').change(function () {
            $('.next').toggle($("input").filter(function () {
                return this.value === "";
            }).length === 0)
        });
    });

演示：http://jsfiddle.net/IrvinDominin/DwF2P/

更新

您可以通过cheking type属性按类型检查元素的值。

代码：

$(function () {
    $('input').change(function () {
        $('.next').toggle($("input").filter(function () {
            var myType=$(this).attr("type");
            if (myType === "checkbox") return !$(this).is(":checked");
            if (myType==="radio"){
                var myName = $(this).attr("name");
                if (myName==="") return !$(this).is(":checked");
                return $('input[name='+ myName +']:checked').length===0
            }
            return this.value === "";
        }).length === 0)
    });
});

演示：http://jsfiddle.net/IrvinDominin/pqJhg/

Answer 3

循环输入。如果找到未填写的，则隐藏DIV。如果不这样做，请显示DIV。

$('input').change(function() {
    var allFilled = true;
    $('input').each(function() {
        if (this.value === '') {
            allFilled = false;
            return false; // Terminate the loop
        }
    }
    $('.next').toggle(allFilled);
});

当所有输入字段都有内容时显示div

3 个答案:

更新