Question

我找到了几个例子和解决方案，但似乎没有一个像我想要的那样对我有效。

我需要的是：我有一个表格，我必须为23个“用户”中的每一个选择我们称之为“属性”的内容，并且至少需要一个。

它在视觉上应该像电子表格一样，带有行和列：

.

我无法做的是确保为每个 UserID 选择至少一个选项。

你能指出我正确的方向，我应该使用什么？它可以是编码标准，也可以是工具......我不知道......

Answer 1

有很多方法可以解决这个问题。我可以告诉你其中一个。

注意：我在编码方面不太好。我不完全知道这是不是一个好习惯，但它确实有效。

首先，在yout复选框中添加class和name属性。 class将用于验证，name将用于在提交后获取您的数据。

以下是示例代码：我只使用了4个选项和4个用户ID。你可以相应地改变它。

            <table class="table table-bordered">
            <tr>
                <td>
                    UserID
                </td>
                <td>
                    1
                </td>
                <td>
                    2
                </td>
                <td>
                    3
                </td>
                <td>
                    4
                </td>
            </tr>
            <tr>
                <td>
                    Option A 
                </td>
                <td>
                    <input type="checkbox" class="checkbox1" name="user1option" value="a" />
                </td>
                <td>
                    <input type="checkbox" class="checkbox2" name="user2option" value="a" />
                </td>
                <td>
                    <input type="checkbox" class="checkbox3" name="user3option" value="a" />
                </td>
                <td>
                    <input type="checkbox" class="checkbox4" name="user4option" value="a" />
                </td>               
            </tr>
            <tr>
                <td>
                    Option B 
                </td>
                <td>
                    <input type="checkbox" class="checkbox1" name="user1option" value="b" />
                </td>
                <td>
                    <input type="checkbox" class="checkbox2" name="user2option" value="b" />
                </td>
                <td>
                    <input type="checkbox" class="checkbox3" name="user3option" value="b" />
                </td>
                <td>
                    <input type="checkbox" class="checkbox4" name="user4option" value="b" />
                </td>               
            </tr>
            <tr>
                <td>
                    Option C 
                </td>
                <td>
                    <input type="checkbox" class="checkbox1" name="user1option" value="c" />
                </td>
                <td>
                    <input type="checkbox" class="checkbox2" name="user2option" value="c" />
                </td>
                <td>
                    <input type="checkbox" class="checkbox3" name="user3option" value="c" />
                </td>
                <td>
                    <input type="checkbox" class="checkbox4" name="user4option" value="c" />
                </td>               
            </tr>
        </table>

其次，在您的表单中添加onsubmit（）函数进行验证。

    <form action="submitaction" onsubmit="return validateForm()">...

*最后，添加此脚本进行验证

    <script type="text/javascript">

    function validateForm() {
        var checked = true;

        // create a loop for checking
        //for loop will be based on the no of userid in this sample its 4
        for (var i = 1; i <= 4; i++) {

            //will check the classname if it is checked 
            if ($('input.checkbox' + i).is(':checked'))
                checked = true;
            else
                checked = false;

            // will break the loop if the returned check is false in the checked options
            if (checked == false)
                break;

        };

        if (checked == false)
            alert("form not submitted.");

        return checked;
    }
</script>

表单验证 - 组中至少需要一个复选框

1 个答案: