如果未选中复选框，则提交默认值答案

【问题标题】：submit default value if the checkbox is unchecked如果未选中复选框，则提交默认值
【发布时间】：2017-08-18 10:59:19
【问题描述】：

我有一个 html 表单提交给我的 spring java 控制器。我这里有个小问题。

 <table id="example1" class="table table-bordered table-striped">
                            <thead>

                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Age</th>
                                <th>Sex</th>
                                <th>District</th>
                                <th>VDC/MUNICIPAL</th>
                                <th>Ward No.</th>
                                <th>Camp Visited?</th>
                                <th>Consent</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="persons : ${part}">
                                <form method="post" th:action="@{/addParticipant}" enctype="multipart/form-data">
                                    <input type="hidden" th:value="${persons.id}" name="id">
                                    <td>
                                        <span class="hidden" th:text="${persons.name}"></span>
                                        <input type="text" name="name" th:value="${persons.name}">
                                    </td>
                                    <td>
                                        <span class="hidden" th:text="${persons.lastName}"></span>
                                        <input name="lastName" type="text" th:value="${persons.lastName}">
                                    </td >
                                    <td>
                                        <span class="hidden" th:text="${persons.age}"></span>
                                        <input name="age" type="text" th:value="${persons.age}">
                                    </td>
                                    <td>
                                        <span class="hidden" th:text="${persons.sex}"></span>
                                        <input name="sex" type="text" th:value="${persons.sex}">
                                    </td>
                                    <td>
                                        <span class="hidden" th:text="${persons.district}"></span>
                                        <input name="district"  type="text" th:value="${persons.district}">
                                    </td>
                                    <td>
                                        <span class="hidden" th:text="${persons.vdcMun}"></span>
                                        <input name="vdcMun"  type="text" th:value="${persons.vdcMun}">
                                    </td>
                                    <td>
                                        <span class="hidden" th:text="${persons.wardNo}"></span>
                                        <input name="wardNo" type="text" th:value="${persons.wardNo}">
                                    </td>
                                    <td>
                                        <div class="checkbox">
                                            <input type='hidden' value='no' name='attendStatus' id="attendStatusHidden">
                                            <input type="checkbox" value="yes" name="attendStatus" id="attendStatus">
                                        </div>

                                    </td>
                                    <td>
                                        <div class="form-control">
                                            <input type="hidden" name="file" value="null">
                                            <input id="file" type="file" name="file" accept="image/*">
                                        </div>
                                    </td>
                                    <td>
                                        <button type="submit" class="btn btn-success" id="submitButton">Submit</button>
                                    </td>
                                </form>
                            </tr>
                            </tbody>
                        </table>

所以我想要做的是，每当我的复选框被选中时，它应该发送值是，否则发送否。

我尝试将两个输入字段隐藏起来。但是每当我提交表格时，它都会在我的桌子上发布是和否。

我试过这样的javascript。

   window.onload = function(){
    if(document.getElementById("attendStatus").checked) {
        document.getElementById('attendStatusHidden').disabled = true;
    }
};

每当我选中复选框时，我都会尝试禁用隐藏字段，但它仍然会在我的桌子上发布“是”，“否”。

如果有的话，我如何用 javascript 或 HTML 本身解决这个问题？

【问题讨论】：

标签： javascript java html forms checkbox

【解决方案1】：

您可以为隐藏字段使用单独的输入名称：

<input type='hidden' value='no' name='_attendStatus' id="attendStatusHidden">

如果您的参数attendStatus 不存在，您可以使用_attendStatus 值。

这个约定例如在 Spring 中使用。有关更多信息，请参阅this answer。

在客户端处理此问题的另一种选择是：

<input type='hidden' value='false' name='attendStatus' id="attendStatusHidden">
<input type="checkbox" onchange="document.getElementById('attendStatusHidden').value = this.checked">

【讨论】：

这不起作用。每当我在不选中复选框的情况下提交表单时，它都会返回参数未找到错误。
这就是我在回答中解释的内容，当找不到参数时，使用 _ + parameterName 获取隐藏值。查看我的编辑以获取另一个选项

【解决方案2】：

你可以这样轻松管理。

<input type='hidden' value='false' name='attendStatus' ">
<input type="checkbox" name="attendStatus" value="true" >

如果未选中复选框，则发送到表单的值将为 false。如果选中该复选框，则发送到表单的值将为真。你应该对它们有相同的“名称”属性，并且顺序也很重要，隐藏的输入首先出现在复选框之后。

【讨论】：