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

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

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


当前回答

同样的问题,未选中的复选框将不会在表单提交时发送,我提出了另一种解决方案,而不是镜像复选框项目。

获取所有未选中的复选框

var checkboxQueryString;

$form.find ("input[type=\"checkbox\"]:not( \":checked\")" ).each(function( i, e ) {
  checkboxQueryString += "&" + $( e ).attr( "name" ) + "=N"
});

其他回答

同样的问题,未选中的复选框将不会在表单提交时发送,我提出了另一种解决方案,而不是镜像复选框项目。

获取所有未选中的复选框

var checkboxQueryString;

$form.find ("input[type=\"checkbox\"]:not( \":checked\")" ).each(function( i, e ) {
  checkboxQueryString += "&" + $( e ).attr( "name" ) + "=N"
});

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

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

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

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

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

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

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

我用下面的代码解决了这个问题:

HTML表单

<input type="checkbox" id="is-business" name="is-business" value="off" onclick="changeValueCheckbox(this)" >
<label for="is-business">Soy empresa</label>

而javascript函数通过改变复选框值的形式:

//change value of checkbox element
function changeValueCheckbox(element){
   if(element.checked){
    element.value='on';
  }else{
    element.value='off';
  }
}

服务器检查数据张贴是“打开”还是“关闭”。我使用的是playframework java

        final Map<String, String[]> data = request().body().asFormUrlEncoded();

        if (data.get("is-business")[0].equals('on')) {
            login.setType(new MasterValue(Login.BUSINESS_TYPE));
        } else {
            login.setType(new MasterValue(Login.USER_TYPE));
        }

从HTML 4规范,应该是一致的几乎所有浏览器:

http://www.w3.org/TR/html401/interact/forms.html#checkbox

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

成功的定义如下:

一个成功的控件是“有效的”提交。每一个成功的 控件的控件名与其当前值配对,作为 提交的表单数据集。必须定义一个成功的控件 在FORM元素中,并且必须有控件名。

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

<输入类型=“隐藏”

<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',
)