发布选中和未选中的复选框

Posted 2023-02-24

【中文标题】发布选中和未选中的复选框

【英文标题】：Posting both checked and unchecked checkboxes

【发布时间】：2012-07-24 07:42:15

【问题描述】：

我正在尝试在网络表单中制作一系列复选框，这些复选框将根据是否选中将“true”或“false”发布到下一个 php 页面。我决定为每个复选框（value =“true”），我会有一个隐藏的复选框（value =“false”），它们始终是相对的（检查复选框时，隐藏复选框未被选中等）我正在使用jQuery这样做。

“td”元素的数量未知（“td”可以使用按钮无限次克隆，以提交多个值）。我将警报添加到 jQuery 以进行测试。

当我将 jQuery 代码和隐藏的复选框添加到我的源代码中时（为了测试目的我让它可见），代码将无法工作并且我网页上的所有其他 jQuery 都停止工作了！

jQuery 代码：

$(document).ready(function()
    /***post all 'required' checkboxes instead of just checked ones***/
    $(".required").click(function(event)
        event.preventDefault();
        alert("test");
        nextIndex = this.index() + 1;
        alert(nextIndex);
        $(".required:eq(nextIndex)").attr("checked", !.required:eq(nextIndex).attr("checked"));
    );
);

html：

<td>
    <input type="checkbox" class="required" name="required[]" value="true">
    <input type="checkbox" class="required" name="required[]" value="false" style="display: none;" checked>
</td>

【问题讨论】：

这听起来像是比复选框更适合单选按钮的工作。

【参考方案1】：

这条线可能导致事情中断：

$(".required:eq(nextIndex)").attr("checked", !.required:eq(nextIndex).attr("checked"));

你的意思可能是：

$(".required:eq(" + nextIndex + ")").attr("checked", !$('.required:eq(' + nextIndex + ')').attr("checked"));

另请注意，您需要将nextIndex 去掉引号。

我的猜测是您的 javascript 控制台会抛出与此相关的某种错误。

编辑：

我注意到的另一个错误是：

nextIndex = this.index() + 1;

.index() 是一个 jQuery 函数，必须在 jQuery 对象上调用。 this 是被点击的元素，所以你需要说：

nextIndex = $(this).index() + 1;

顺便说一句，您可能想查看jQuery's .next() function. 它会让您摆脱所有这些nextIndex 的胡言乱语。

【讨论】：

好吧，我页面上的另一个 jQuery 现在正在工作，所以我也很关心我遇到的任何语法错误 - 谢谢！但是，它仍然没有按照我想要的方式工作。当我单击复选框时，我看到第一条警报消息，但没有看到第二条，然后复选框再次取消选中。隐藏的复选框没有任何反应（它保持选中状态）。

【参考方案2】：

您不必隐藏其中一个复选框。这是一个应该完成您想要的解决方案：

<input type="hidden" name="required" value="false" />
<input type="checkbox" name="required" value="true" />

如果未选中该复选框，则将使用 false 值提交隐藏字段。如果选中该复选框，则复选框中的 true 值将覆盖隐藏输入中的 false 值。

只要您可以为每个复选框命名稍有不同，它应该可以工作。

以下内容也适用于值数组：

<input type="hidden" name="required[0]" value="false" />
<input type="checkbox" name="required[0]" value="true" />

<input type="hidden" name="required[n]" value="false" />
<input type="checkbox" name="required[n]" value="true" />

这样，您不需要任何客户端 javascript 来切换隐藏的复选框。

【讨论】：

是的，解决方案是在每个复选框之前输出一个hidden 元素，并带有复选框的“off”值。选中复选框会导致发布“on”值而不是隐藏输入的值。

这是一个很好的解决方案，但是我不知道会有多少个复选框......我会看看我是否可以找到一种方法在使用添加它们时自动命名它们我的网页上的按钮。

只要你在 DOM before 复选框元素中添加一个与复选框同名的隐藏输入，只要你有 1 个隐藏输入 w / 每个复选框的名称相同。如果隐藏输入意外地作为节点在复选框添加到 DOM，那么您将获得相反的效果，并且该值将始终为 false（隐藏输入的值）。

今天偶然发现了这个，不得不让你知道这是一个绝妙的解决方案。它是如此干净且易于实施！喜欢学习这样的交易技巧。

这是迄今为止我见过的最好的解决方案

【参考方案3】：

如果您这样命名您的复选框，则不一定要使用索引：

<input type="checkbox" name="checkbox_name[]" />

那么这个 jQuery 的 sn-p 应该适合你，假设你可以依赖 javascript。

$('form').submit(function()

    $(":checkbox:not(:checked)").each(function(element, index)
        $(this).attr(value: 'false', checked:'checked');
    );

    return true;
);

这将遍历所有未选中的复选框，选中它们并将它们的值设置为false。这是你在 PHP 中得到的：

[checkbox_name] => Array
    (
        [0] => off
        [1] => on
        [2] => off
    )

代替：

[checkbox_name] => Array
    (
        [0] => on
    )