jquery - 当所有输入都连续完成时，逐步浏览表单

Question

--FIDDLE --

我正在设计一个类似于向导的表单，引导用户完成每个输入，并且在解决所有输入之前不允许他们继续。

当且仅当当前行中的所有输入都已填写或检查时，我想显示表中的下一行。行可以包含任意数量的文本输入、复选框或单选组。

这是我当前的代码:

<table>
    <tr>
        <td><input type="text"></td>

        <td><input type="radio"></td>
    </tr>

    <tr style="display:none">
        <td><input type='radio'></td>

        <td><input type='checkbox'></td>
    </tr>

    <tr style="display:none">
        <td><input type='text'></td>

        <td><input type='text'></td>
    </tr>
</table>​

<小时/>

function refreshCascadingLists() {
    // Get an array of tr's
    // Loop thorugh each and see if it should be shown based on it's predecessors status
    var prevHadUnselected = false;
    $("table tr").next("tr").each(function(curIdx, curEntity) {
        if (prevHadUnselected) {
            $(this).fadeOut();
        } else {
            $(this).fadeIn();
        }

        prevHadUnselected = false;
        $(this).find(":input").each(function(curSelIdx, curSelEntity) {
            if ($(curSelEntity).val() == "" && $(curSelEntity).not(":checked")) 
                prevHadUnselected = true;
        });
    });
}

$(document).ready(function() {
    $(":input").bind('keyup change', function() {
        refreshCascadingLists();
    });
});​

<小时/>

当用户在第一行的文本框中键入内容时，这将显示下一行，但他们还应该检查单选按钮。此外，它显示表中的所有行，而不仅仅是下一行。

Answer 1

我会做something like this :

function refreshCascadingLists($tr) {
    var all_filled = true;
    $tr.find(':input').each(function() {
        if($(this).is('input[type=radio], input[type=checkbox]')) {
            if(!$(this).is(':checked')) {
                all_filled = false;    
            }
        } else if($(this).val() == '') {
            all_filled = false;
        }
    });

    var $next_tr = $tr.next('tr');    
    if(all_filled) {
        if(!$next_tr.is(':visible')) {
            $next_tr.fadeIn(function() {
                refreshCascadingLists($(this));                    
            });    
        }
    } else {
        $tr.nextAll('tr').hide();
    }
}

$(document).ready(function() {
    $(":input").bind('keyup change', function() {
        refreshCascadingLists($(this).closest('tr'));
    });
});​

大多数函数实际上可以被简化很多，但我是这样写的，这样你就可以很容易地看到它在做什么。