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

时间:2013-05-24 11:35:40

标签: jquery mysql forms jquery-validate survey

我一直试图解决这个问题好几天..我必须进行在线调查,表格根据用户以前的一些选择动态加载...这意味着我不能使用“名称”或输入的“id”属性,因为它们并不总是相同。我正在使用Jquery验证插件来完成所有输入,它工作正常。但我的问题是:

  • 有些问题取决于前一个问题的回答,这意味着不仅要回答上一个问题,还要回答具体答案。 (例如:“你喜欢水果吗?”如果答案是“是”那么再显示另一个问题“你通常吃哪些水果?”并提出要求,如果答案为“否”则不显示问题完全没有。

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

如果我有静态表格,这将非常容易,但事实并非如此。

请帮忙!

1 个答案:

答案 0 :(得分:0)

我正在使用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);
}