使用 jQuery 为单选按钮表单创建说明框

Question

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

值得注意的是，我使用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
        }
    });
});

我的功能目前不起作用，但我正在寻找有关如何最好地实现此功能的指导。最后，显示一个文本区域可能更容易解释任何复选框在表单末尾回答“是”，但感觉初始方法看起来更好，并且允许我根据需要分开响应。

最终更新

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

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

Answer 1

您当前的解决方案需要考虑几件事情。首先，正如 Danimal37 所提到的，您只在页面加载时运行它。您希望在每个单选按钮的值发生变化时显示/隐藏说明框。其次，有一种内置方法可以区分“是”和“否”。只需给输入元素value 属性。为了解决这些问题，我提出以下建议（我忽略了验证部分，您可以在这个 jsfiddle 中看到它的实际效果：http://jsfiddle.net/xonev/RU986/2/）：

// The Javascript $('input[value="1"]').change(function () { var explainId = $(this).attr('name') + 'explain'; $(this).closest('tr').after('<tr id="' + explainId + '"><td colspan="2">Please explain below:<br><textarea name="a1" id="a1"></textarea></td></tr>'); }); $('input[value="0"]').change(function () { var explainId = $(this).attr('name') + 'explain'; $(this).closest('tr').next('tr#' + explainId).remove(); });

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

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

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

Answer 2

我已经设置了一个 jsfiddle here，我认为它可以满足您的需求。

Answer 3

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

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

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

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

然后您可以进行如下检查：

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