字段取决于调查表中另一个字段的答案答案

【问题标题】：Field depends on another field's answer in a survey form字段取决于调查表中另一个字段的答案
【发布时间】：2013-05-20 00:01:03
【问题描述】：

我已经尝试解决这个问题好几天了。我必须进行在线调查，表单是根据用户之前的一些选择动态加载的。这意味着我不能使用“名称”或输入的“id”属性，因为它们并不总是相同的。我正在使用 Jquery validate 插件来使所有输入都需要并且它工作正常。但我的问题是：

有些问题取决于上一个问题的回答，这意味着不仅应该回答上一个问题，还需要一个具体的答案。（例如：“你喜欢水果吗？”如果答案是“是”，则显示另一个问题“你通常吃这些水果中的哪一种？”并使其成为必填项，如果答案为“否”，则不显示该问题完全没有。

我想我会在数据库问题表中添加一个“依赖”字段，以根据其他问题提出一些问题，但是依赖的类型因一个问题而异。

如果我有一个静态表单，这将非常容易，但事实并非如此。

请帮忙！

【问题讨论】：

你在用 PHP 吗？
是的，我使用 Ajax 加载表单，然后 PHP 使用适当的字段动态填充表单
您是否考虑过使用 $_POST，如果您的第一个问题是：“您喜欢苹果吗？”确保“是”按钮的名称为“是”，如果他们单击“否”并且您为按钮命名为“否”，您可以这样做 if($_POST['No']) { //显示一个问题 } else { //显示另一个 }
我不确定我是否理解，但我没有为每个问题使用一个按钮。在是/否的情况下，它是一个无线电输入。表单末尾只有一个提交按钮。
你也可以给单选按钮一个名字...

标签： jquery mysql forms jquery-validate survey

【解决方案1】：

我正在为一些自定义属性使用 html5 data- 属性来存档：

html:

<input type="checkbox" data-dependid="test" />
<input type="text" data-dependid="test2" data-dependedid="test" data-dependedvalue="true" data-dependedtype="disabled" disabled="disabled" />
<input type="text" data-dependedid="test2" data-dependedvalue="input" data-dependedtype="disabled" disabled="disabled" />

jQuery:

$(function() {
    $("[data-dependid]").die().live("change keyup", function () {
        var that = this;
        var depends = $("[data-dependedid='" + $(that).attr("data-dependid") + "']");
        depends.each(function (i, depend) {
            var isSame = false;
            if (($(that).is(":checked") + "" == $(depend).attr("data-dependedvalue")) || ($(that).val() == $(depend).attr("data-dependedvalue"))) {
                isSame = true;
            }
            $(depend).attr($(depend).attr("data-dependedtype"), !isSame); //works for checked and disabled
        });
    });
});

这使得第一个文本框依赖于复选框。

第二个文本框取决于第一个文本框的值（输入）。

看到这个fiddle

要添加显示选项，请在 foreach 中添加：

var isSame = false;
if (($(that).is(":checked") + "" == $(depend).attr("data-dependedvalue")) || ($(that).val() == $(depend).attr("data-dependedvalue"))) {
    isSame = true;
}
if ($(depend).attr("data-dependendtype") == "display") {
    if (!isSame)
       $(depend).fadeOut();
    else
       $(depend).fadeIn();
}
else {
   $(depend).attr($(depend).attr("data-dependedtype"), !isSame);
}

【讨论】：