jquery每个输入值都有效

时间:2013-05-02 03:28:23

标签: jquery each onchange

我试图在div中获取多个输入的值,并且一旦div中的所有输入都有值控制台,就会记录一条消息。一旦父div中的所有输入都有值,我只想要消息。

我已经设置了一个小提琴http://jsfiddle.net/r3PdW/

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // name = row1, show = row 2, item 1 = null, item 2 = null, item 3 = test, success = false
            $('div.items:first').show();
            $('div.items').children('input').on('change', function(){
                var parent = $(this).parent('div').data('name');
                var path = $(this).parent('div').data('show');
                $(this).parent('div.items').children('.required').each(function (index) {
                    if ($(this).val() != '') {
                        console.log('ok');
                    }
                });
            });
        });
    </script>
    <style type="text/css">
        .items {
            display: none;
        }
    </style>
</head>
<body>
    <div class="items" data-name="row1" data-show="row2">
        <input type="text" class="required" />
        <input type="text" class="required" />
        <input type="text" class="required" />
    </div>
    <div class="items" data-name="row2" data-show="row3">
        <input type="text" class="required" />
        <input type="text" class="required" />
        <input type="text" class="required" />
    </div>
    <div class="items" data-name="row3" data-show="buttonholder">
        <input type="text" class="required" />
        <input type="text" class="required" />
        <input type="text" class="required" />
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

尝试

$('div.items:first').show();
$('div.items').children('input').on('change', function(){
    var parent = $(this).parent('div').data('name');
    var path = $(this).parent('div').data('show');
    var valid = true;
    $(this).parent('div.items').children('.required').each(function (index) {
        if ($(this).val() == '') {
            valid = false;
            return false;
        }
    });
    if(valid){
        console.log('ok')
    }
});

演示:Fiddle