0

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>
4

1 に答える 1