Question

我有一份调查问卷，其中一个问题提供了五个答案选项。用户可以勾选三个，并给这三个评级。为避免误解，这里是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>

我需要能够检查用户是否勾选了三个以上的选项，并且第一，第二和第三等级仅使用一次。我可以使用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，所以我需要一个相当现成的脚本。

非常感谢。

Answer 1

在这个实例中你不需要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));
    }
}

Answer 2

创建了一个使用纯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/

如何以更简单的方式正确填写此表格？

2 个答案: