javascript - 使用 jQuery 为单选按钮表单创建解释框

Question

我将在下面使用简化版本，但我正在尝试构建一个包含简单的是/否问题的表单。如果答案是否定的，则无需解释。如果答案是肯定的，则会插入一个新的表格行，并且会出现文本区域，要求对该特定问题进行解释。

请注意，我使用 jQuery validate plugin确保检查值并计划在最后为每个字段实现一个必需的依赖函数。

我的表格:

<form name="formtest" action="">
    <table class="background_table">
    <tbody>
    <tr>
        <td>Are you a man?</td>
        <td>
            <input type="radio" name="q1" id="yes1">Yes
            <input type="radio" name="q1" id="no1">No
        </td>
    </tr>
    <tr>
        <td>Do you have hair?</td>
        <td>
            <input type="radio" name="q2" id="yes2">Yes
            <input type="radio" name="q2" id="no2">No
        </td>
    </tr>

    <tr>
        <td>Do you have children?</td>
        <td>
            <input type="radio" name="q3" id="yes3">Yes
            <input type="radio" name="q3" id="no3">No
        </td>
    </tr>
    </tbody>
    </table>

<input type="submit" />
</form>

我相信我的 jQuery 函数会使用 .each() 函数遍历所有字段(假定我的实际表单有 20 多个问题)，然后对各个字段运行测试以查看值是否为 yes:checked。如果是新行，则在带有空白文本区域的字段之后插入。

我不太确定此时命名和识别文本区域的最佳方法是什么。最终，我想所有文本区域的答案都可以组合成一个数组，并按 ID 和值分解，但我还不确定我想如何处理它。

jQuery 函数:

$(function() {

    $('input').each( function() {
        if( $('#yes1').is(':checked')) { //need to figure out how to find the yes value for each input
            $('#yes1').closest('tr').after('<tr><td colspan="2">Please explain below:<br><textarea name="a1" id="a1"></textarea></td></tr>');
        }
    });


    $("#formtest").validate({
        errorLabelContainer: "#form_error_message",
        wrapper: "li",
        rules: {
            q1: 'required',
            q2: 'required',
            q3: 'required',
            q4: 'required',
            a1: { required: "yes1:checked" },
            a2: { required: "yes2:checked" },
            a3: { required: "yes3:checked" },
            a4: { required: "yes4:checked" }
        },
        messages: {
            //custom messages for all rules above
        },
        submitHandler: function() {
            //Do processing
        }
    });
});

我的功能目前无法正常工作，但正在寻求有关如何最好地实现这一目标的指导。最后，可能更容易呈现一个文本区域来解释任何复选框在表单末尾回答"is"，但感觉初始方法看起来更好，并且允许我在需要时分开响应。

最后更新

请注意，作为表单的一部分，用户可以返回此页面。为了防止他们不得不重新输入答案和选择，我使用 PHP SESSION 变量来包含以前输入的数据。我需要确保解释框在必要时显示或隐藏。为了防止非 js 浏览器出现任何问题，如果相应复选框的值不等于 1，我会先显示所有解释框，然后设置为隐藏:

$(":radio:checked").each(function() {
    if( $(this).val() != 1) {
       $(this).closest('tr').next().hide();
    }
});

Answer 1

看起来您只是在检查初始 DOM 加载。您需要触发对点击事件的检查，以便您的框在点击时出现/消失。我会添加一个包含每个评论框的隐藏 tr 行，然后根据需要显示或隐藏。像这样:

$('input:radio').click(function() {
    $commentTr = $(this).closest('tr').next();
    if ($(this).val() == 'Yes')  {
        $commentTr.hide();
    }
    else {
        $commentTr.show();
    }
});

仔细检查后，我想检查值"is"不会完全起作用。我建议使用带有“for”属性的 HTML 标签，其中填充了每个输入的唯一 ID。

<input type="radio" name="q1" id="yes1"><label for="yes1">Yes</label>

然后你可以像这样检查:

$('label[for="' + id + '"'].html() == '是'