0

我有一份问卷，其中一个问题提供五个答案选项。用户可以勾选三个，并给这三个评分。为避免误解，以下是 HTML 代码：

<table>
    <tr>
        <td><input type="checkbox" name="option_1"> Option 1 (to be determined)</td>
        <td>
            <select name="">
                <option value="">as:</option>
                <option value="3">1st</option>
                <option value="2">2nd</option>
                <option value="1">3rd</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="option_2"> Option 2 (to be determined)</td>
        <td>
            <select name="">
                <option value="">as:</option>
                <option value="3">1st</option>
                <option value="2">2nd</option>
                <option value="1">3rd</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="option_3"> Option 3 (to be determined)</td>
        <td>
            <select name="">
                <option value="">as:</option>
                <option value="3">1st</option>
                <option value="2">2nd</option>
                <option value="1">3rd</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="option_4"> Option 4 (to be determined)</td>
        <td>
            <select name="">
                <option value="">as:</option>
                <option value="3">1st</option>
                <option value="2">2nd</option>
                <option value="1">3rd</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="option_5"> Option 5 (to be determined)</td>
        <td>
            <select name="">
                <option value="">as:</option>
                <option value="3">1st</option>
                <option value="2">2nd</option>
                <option value="1">3rd</option>
            </select>
        </td>
    </tr>
</table>

我需要能够检查用户没有勾选超过三个选项，并且评级 1st、2nd 和 3rd 仅使用一次。我可以使用分别检查每个项目的 javascript 进行检查，如下所示：

if (document.form_name.option_1.value != "") && 
(document.form_name.option_2.value != "") && 
(document.form_name.option_3.value != "") && 
(document.form_name.option_4.value != "") 
{alert('You can only tick three options'); return false};

但这会给出一个巨大的脚本。有没有更简单的方法？它可能是 javascript 或 PHP。最好是后者，但我对 PHP 不是很精通，所以我需要一个相当容易使用的脚本。

提前非常感谢。

4

2 回答 2

2

在这种情况下您不需要 PHP（尽管您应该包括像 PHP 这样的服务器端验证，因为无法保证验证 JS 确实在客户端的浏览器上运行。可能是因为恶意用户，或者可能只是因为没有启用 JS）。

如果你添加一些逻辑，你可以让你的 JS 更短。遍历您的每个问题。在每个问题中，计算每个选中的复选框，完成后查看哪些复选框选中了 3 个以上。

var questions = document.getElementsByClassName('question'), numberChecked, answers;

for(var q = 0, qlen = questions.length; q < qlen; q++) {
    numberChecked = 0;
    answers = questions[q].getElementsByTagName('input');

    for(var a = 0, alen = answers.length; a < alen; a++) {
        if(answers[a].type == 'checkbox' && answers[a].checked) {
            numberChecked++;
        }
    }

    if(numberChecked > 3) {
        alert('You may only check 3 choices for question #' + (q + 1));
    }
}
于 2013-05-04T18:38:09.830 回答
0

创建了一种使用纯 JavaScript 进行验证的方法：

    function innerValidate(){
    var inputs = document.form1.getElementsByTagName("input");
    var ddls = document.form1.getElementsByTagName("select");
    var checkedCount = 0, ddl, opsSelected = [], isValid = false;
    for(var i=0; i<inputs.length; i++)
    {
        if(inputs[i].type == 'checkbox' && inputs[i].checked == true)
        {
            if(++checkedCount >3){
                isValid = false;
                return isValid;
            }
            for(var j=0; j<ddls.length; j++)
            {
                if(ddls[j].name == inputs[i].name)
                {
                    ddl = ddls[j];
                    break;
                }
            }
            if(ddl.value && opsSelected.indexOf(ddl.value) == -1)
            {
                opsSelected.push(ddl.value);
            }
            else
            {
                isValid = false;
                return isValid;
            }
        }
    }
    if(checkedCount == 3)
    {
        isValid = true;
    }
    return isValid;
}

jsfiddle：http: //jsfiddle.net/T784z/

于 2013-05-04T19:14:10.560 回答