在HTML中，每个<input />元素都与单个(但不是唯一的)名称和值对相关联。只有当<input />是“成功的”时，这个对才会在后续的请求中发送(在本例中是POST请求体)。

如果你在<form> DOM中有这些输入:

<input type="text"     name="one"   value="foo"                        />
<input type="text"     name="two"   value="bar"    disabled="disabled" />
<input type="text"     name="three" value="first"                      />
<input type="text"     name="three" value="second"                     />

<input type="checkbox" name="four"  value="baz"                        />
<input type="checkbox" name="five"  value="baz"    checked="checked"   />
<input type="checkbox" name="six"   value="qux"    checked="checked" disabled="disabled" />
<input type="checkbox" name=""      value="seven"  checked="checked"   />

<input type="radio"    name="eight" value="corge"                      />
<input type="radio"    name="eight" value="grault" checked="checked"   />
<input type="radio"    name="eight" value="garply"                     />

将生成这些名称+值对，并提交给服务器:

one=foo
three=first
three=second
five=baz
eight=grault

注意:

2和6被排除在外，因为它们具有disabled属性集。 3被发送了两次，因为它有两个名称相同的有效输入。 没有发送Four，因为它是一个未选中的复选框 尽管选中了Six，但没有发送，因为disabled属性具有更高的优先级。 Seven没有发送name=""属性，所以没有提交。

关于你的问题:你可以看到，一个没有被选中的复选框将不会将其名称+值对发送到服务器-但其他共享相同名称的输入将与它一起发送。

像ASP这样的框架。NET MVC通过(秘密地)将每个复选框输入与渲染HTML中的隐藏输入配对来解决这个问题，如下所示:

@Html.CheckBoxFor( m => m.SomeBooleanProperty )

呈现:

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

如果用户不勾选复选框，则将以下内容发送到服务器:

SomeBooleanProperty=false

如果用户选中了复选框，那么两个都将被发送:

SomeBooleanProperty=true
SomeBooleanProperty=false

但是服务器会忽略=false版本，因为它看到了=true版本，所以如果它没有看到=true版本，它就可以确定复选框被呈现了，并且用户没有选中它——而不是someboolean属性输入根本没有被呈现。

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

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));
        }

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

<输入类型=“隐藏”

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

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

获取所有未选中的复选框

var checkboxQueryString;

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

浏览器只发送复选框输入是标准行为吗 价值数据是否在表单提交时进行检查?

是的，因为否则就没有可靠的方法来确定复选框是否被选中(如果它改变了值，则可能存在这样的情况，即当您选中的期望值与它被交换到的值相同时)。

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

其他答案证实“开”是默认值。但是，如果你对值不感兴趣，可以使用:

if (isset($_POST['the_checkbox'])){
    // name="the_checkbox" is checked
}

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

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

这在W3C HTML 4推荐中包含:

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