Question

我有一个HTML表单，其中包含3组（A，B和C）中的一系列问题，用户只能回答任何一组的问题。我有一个脚本验证他们的输入，以检查他们是否只回答了一组中的所有问题。

我想捕捉他们回答的哪一组问题并将其作为隐藏输入发送。我设置了一个隐藏的输入：

<input type="hidden" name="type" value="" id="type">

理想情况下，我希望用以下内容替换它：

<input type="hidden" name="type" value="groupA" id="type">

我设置了一个显示表单/脚本的小提琴：

http://jsfiddle.net/fmdataweb/CGp8X/

这是我当前的验证脚本：

$('#editRecord').on('submit', validate);
$('input.sectionclear').on('click', function() {
    $(this).next().find('input').attr('checked', false);
});
function validate(ev) {
    var sectionsTouched = $('tbody').has(':checked'),
       inputs = {},
       errorMessage = '';

    if (sectionsTouched.length === 0) {
        errorMessage = 'Please check something before submitting.';
    } else if (sectionsTouched.length > 1) {
        errorMessage = 'Please complete A or B or C only';
    } else {
        sectionsTouched.find('input').each(function(i, e) {
            var me = $(e), name = me.attr('name');
            inputs[name] = !!inputs[name] || me.is(':checked');
        });
        $.each(inputs, function(k, v) {
            if (!v) {
                errorMessage = 'It appears you have not completed all questions.';
            }
            return v;
        });            
    }
    if (errorMessage !== '') {
        $('#error').html(errorMessage);
        ev.preventDefault();
        return false;
    }
    return true;
}


function seriesNames() {
    var names = [];
    $('h3').each(function(i, e) {
        names.push($(e).text());
    });
    return names;
}

function namesCommaDelimited(namesArr, conjunction) {
    var retval = '', i, l = namesArr.length - 1, delimiter = '';
    if (l === 0) {
       return retval;
    }
    for (i = 0; i < l; i += 1) {
        retval += delimiter;
        retval += namesArr[i];
        delimiter = ', ';
    }
    retval += delimiter;
    retval += conjunction;
    retval += ' ';
    retval += namesArr[l];
    return retval;
}

是否有可能以某种方式扩展它以捕获他们回答的哪组问题？ HTML表格有3个标签来标识每个组：

<tbody class="groupA">

Answer 1

您可以通过检查已检查输入的数量是否为输入数量的一半来生成它们。

$('tbody[class^=group]').each(function (i, val) {
  if ($('input:checked', val).length == $('input', val).length / 2) {
    console.log($(val).attr('class'));
  }
});

Answer 2

我希望你没有和你的代码结婚:)。

这有点难以理解，所以我只是掀起了一个原型，希望你可以遵循，并且应该允许你做你想要的：限制特定形式的答案。我还进行了一些简单的验证，以确保表单完全填写并在表单无效时关闭按钮。现在代码：

<强> HTML

<h2>Table A</h2>
<table id="tableA" border="1">
    <tr>
        <td>
            A1
        </td>
        <td>
            <input type="radio" name="a1" value="1" /> Yes
            <input type="radio" name="a1" value="0" /> No
        </td>
    </tr>
    <tr>
        <td>
            A2
        </td>
        <td>
            <input type="radio" name="a2" value="1" /> Yes
            <input type="radio" name="a2" value="0" /> No
        </td>
    </tr>
    <tr>
        <td>
            A3
        </td>
        <td>
            <input type="radio" name="a3" value="1" /> Yes
            <input type="radio" name="a3" value="0" /> No
        </td>
    </tr>
</table>

<h2>Table B</h2>
<table id="tableB" border="1">
    <tr>
        <td>
            B1
        </td>
        <td>
            <input type="radio" name="b1" value="1" /> Yes
            <input type="radio" name="b1" value="0" /> No
        </td>
    </tr>
    <tr>
        <td>
            B2
        </td>
        <td>
            <input type="radio" name="b2" value="1" /> Yes
            <input type="radio" name="b2" value="0" /> No
        </td>
    </tr>
    <tr>
        <td>
            B3
        </td>
        <td>
            <input type="radio" name="b3" value="1" /> Yes
            <input type="radio" name="b3" value="0" /> No
        </td>
    </tr>
</table>

<p>
    <button id="submit">Submit</button>
    <button id="reset">Reset</button>
</p>

<input type="hidden" id="activeTable" />

<强> JS

window.ns = {};
ns.activeTable = null;
ns.validate = function() {
    // Simple validation
    // If we don't have 3 checked radio buttons, it is invalid
    var checked = $("#" + ns.activeTable).find("input[type=radio]:checked");
    var valid = (checked || []).length === 3;
    $("#submit").prop("disabled", !valid);
    return valid;
};

ns.validate();

$("#submit").click(function() {
    var valid = ns.validate;
    if (valid == false) {
        alert("You must complete the form!");
        return;
    }

    var results = $("#" + ns.activeTable).find("input[type=radio]:checked");
    var output = ns.activeTable + " Results\n";
    $.each(results, function(idx, data) {
        output += "\t" + $(this).prop("name") + 
            " - " + $(this).val() + "\n";
    });
    alert(output);
    $("#activeTable").val(ns.activeTable);
});

$("#reset").click(function() {
    $("input[type=radio]").prop("checked", false);
    ns.activeTable = null;
    ns.validate();
});

$("input[type=radio]").click(function() {
    var selectedTable = $(this).closest("table");
    if (ns.activeTable != null && 
        selectedTable.prop("id") != ns.activeTable) {
        alert("Invalid form selection. Onlye selections from " + 
              ns.activeTable + " are allowed");
        $(this).prop("checked", false);
    } else {
        ns.activeTable = selectedTable.prop("id");
    }
    ns.validate();
});

<强> CSS

不是必需的，只是想让它看起来不错：）

html { margin: 10px; }
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
table td { border: 3px solid #CCC; padding: 5px; }
table td:nth-child(1) { width: 75%; }
table td:nth-child(2) { text-align: center; }
h2 { font-size: 1.8em; font-weight; bold }
button { padding: 5px; border-radius: 15px; background-color: #CCC; 
         width: 100px; }

最后，看看它的实际效果：jsFiddle

我使用表id来确定哪个表单是“活动的”并存储该值。这就是我如何限制用户必须使用的表单。

验证很简单：它只是确保检查当前表单的3个复选框。这适用于该示例，但除非每个表单都是相同数量的问题，否则您需要更强大的功能。

验证还控制何时启用提交按钮。还有一个重置按钮，用于清除单选按钮值，以便您可以再次尝试。

希望这证明有用如果没有，我仍然很开心：）

修改

男孩，我是一个涂料。我完全没有放入隐藏字段并设置值，这是被问到的问题！此“疏忽”已得到纠正。 Aslo，只是为了表明该值是在提交时设置的：

Answer 3

我可以建议一些更改，使其更具可读性，首先，“namesComaDelimited”有什么作用？你不能只使用javascript的join方法吗？ http://www.w3schools.com/jsref/jsref_join.asp

对于你的问题，这给了所涉及部分的类：

$(sectionsTouched[0]).attr('class')

对于要检查的输入的验证，我只是将：检查的长度与输入长度进行比较

sectionTouched = $(sectionsTouched[0]);
if (sectionTouched.find('input').length/2 != sectionTouched.find('input:checked')) {
  errorMessage = 'It appears you have not completed all questions.';
}

只需几个，你可以做更多的优化

使用Javascript更新HTML表单中的隐藏输入

3 个答案: