如果在表单提交时勾选复选框输入值数据,浏览器是否仅发送复选框输入值数据是标准行为?

如果没有提供值数据,默认值是否总是“on”?

假设上述假设是正确的,那么所有浏览器的这种行为是否一致呢?


当前回答

以上答案没有一个让我满意。 我发现最好的解决方案是在每个具有相同名称的复选框输入之前包含一个隐藏输入。

<输入类型=“隐藏”

<input type=“checkbox” name=“foo[]”/>

然后在服务器端,使用一个小算法可以得到更像HTML应该提供的东西。

function checkboxHack(array $checkbox_input): array
{
    $foo = [];
    foreach($checkbox_input as $value) {
        if($value === 'on') {
            array_pop($foo);
        }
        $foo[] = $value;
    }
    return $foo;
}

这将是原始输入

array (
    0 => 'off',
    1 => 'on',
    2 => 'off',
    3 => 'off',
    4 => 'on',
    5 => 'off',
    6 => 'on',
),

函数会返回

array (
    0 => 'on',
    1 => 'off',
    2 => 'on',
    3 => 'on',
)  

其他回答

我有一个页面(表单),动态生成复选框,所以这些答案有很大的帮助。我的解决方案与这里的许多解决方案非常相似,但我禁不住认为它更容易实现。

首先,我把一个隐藏的输入框与我的复选框,即。

 <td><input class = "chkhide" type="hidden" name="delete_milestone[]" value="off"/><input type="checkbox" name="delete_milestone[]"   class="chk_milestone" ></td>

现在,如果所有的复选框都未被选中,那么隐藏字段返回的值将全部关闭。

例如,这里有五个动态插入的复选框,表单post了以下值:

  'delete_milestone' => 
array (size=7)
  0 => string 'off' (length=3)
  1 => string 'off' (length=3)
  2 => string 'off' (length=3)
  3 => string 'on' (length=2)
  4 => string 'off' (length=3)
  5 => string 'on' (length=2)
  6 => string 'off' (length=3)

这表明只有第3和第4个复选框被选中或选中。

从本质上讲,虚拟或隐藏的输入字段只是表明一切都是关闭的,除非在off索引下面有一个“on”,然后在不需要一行客户端代码的情况下为您提供所需的索引。

.

当且仅当复选框被选中时,复选框将发布值“on”。您可以使用隐藏输入,而不是捕获复选框值

JS:

var chk = $('input[type="checkbox"]');
    chk.each(function(){
        var v = $(this).attr('checked') == 'checked'?1:0;
        $(this).after('<input type="hidden" name="'+$(this).attr('rel')+'" value="'+v+'" />');
    });

chk.change(function(){ 
        var v = $(this).is(':checked')?1:0;
        $(this).next('input[type="hidden"]').val(v);
    });

HTML:

<label>Active</label><input rel="active" type="checkbox" />

是的,标准行为是仅在选中复选框时才发送值。这通常意味着您需要有一种方法来记住您期望在服务器端出现哪些复选框,因为并非所有数据都是从表单返回的。

默认值总是“on”,这应该在不同浏览器中保持一致。

这在W3C HTML 4推荐中包含:

复选框(和单选按钮)是可以切换的开/关开关 由用户决定。当控制元件被检查时,开关是“打开”的 属性已设置。当提交表单时,只有“on”复选框 控制可以成功。

如果未选中复选框,则它不会在表单提交时发送数据。

HTML5第4.10.22.4节构造表单数据集描述了表单数据的构造方式:

如果满足以下任何条件,则跳过这些子步骤 对于这个元素: […] 字段元素是一个输入元素,其类型为 属性处于复选框状态,其选中度为false。

如果value缺失,则指定默认值on:

否则,如果字段元素是一个输入元素,其类型属性处于复选框状态或单选按钮状态,则运行这些进一步嵌套的子步骤: 如果字段元素指定了value属性,则让value为该属性的值;否则,让value为字符串“on”。

因此在表单数据构造过程中会跳过未选中的复选框。

HTML4中也要求类似的行为。期望所有兼容的浏览器都有这种行为是合理的。

以上答案没有一个让我满意。 我发现最好的解决方案是在每个具有相同名称的复选框输入之前包含一个隐藏输入。

<输入类型=“隐藏”

<input type=“checkbox” name=“foo[]”/>

然后在服务器端,使用一个小算法可以得到更像HTML应该提供的东西。

function checkboxHack(array $checkbox_input): array
{
    $foo = [];
    foreach($checkbox_input as $value) {
        if($value === 'on') {
            array_pop($foo);
        }
        $foo[] = $value;
    }
    return $foo;
}

这将是原始输入

array (
    0 => 'off',
    1 => 'on',
    2 => 'off',
    3 => 'off',
    4 => 'on',
    5 => 'off',
    6 => 'on',
),

函数会返回

array (
    0 => 'on',
    1 => 'off',
    2 => 'on',
    3 => 'on',
)