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

Question

I have found several examples and solutions, but none seemed to work for me the way I want to.

What I need is this: I have a form in which I have to select what we can call "properties" for each of 23 "users", and at least one is required.

It should visually be like a spreadsheet, with lines and columns:

.

What I haven't been able to do is make sure at least one Option is selected for each and every UserID .

Can you point me in the right direction, for what I should use? It can be a coding standard, or a tool... I don't know...

Answer 1

There are many ways to solve this problem. I can show you one of them.

Note: I'm not that good in coding. I don't completely know if it is a good practice or not but it works.

• First, add class and name attribute in yout checkbox. class will be used for validation and name will be used to get your data after submitting.

Here is a sample code: I used 4 options and 4 user id only. you can change it accordingly.

            <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>

• Second, in your form add an onsubmit() function for validation.

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

*Lastly, add this script for validation

    <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>