<input type ="checkbox"/>仅在检查数据时才发布数据吗？

Question

浏览器的标准行为是否仅在表单提交时检查复选框输入值数据？

如果没有提供值数据,默认值是否总是"开启"？

假设以上是正确的,所有浏览器的这种一致行为是什么？

Answer 1

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

默认值始终为"on",这应该在浏览器中保持一致.

这在W3C HTML 4建议中有所涉及:

复选框(和单选按钮)是可由用户切换的开/关开关.当设置了控制元素的checked属性时,开关处于"打开"状态.提交表单时,只有"on"复选框控件才能成功.

Answer 2

在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

请注意:

• two而six被排除,因为他们的disabled属性设置.
• three 被发送了两次,因为它有两个同名的有效输入.
• four没有发送,因为它checkbox不是checked
• six尽管checked因为该disabled属性具有更高的优先级而未被发送.
• seven没有name=""发送属性,因此未提交.

关于您的问题:您可以看到未选中的复选框因此不会将其名称+值对发送到服务器 - 但其他具有相同名称的输入将随之发送.

像ASP.NET MVC这样的框架通过(秘密地)将每个checkbox输入与hidden呈现的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它可以确定复选框已呈现并且用户没有检查它 - 而不是SomeBooleanProperty输入根本没有被渲染.

Answer 3

如果未选中复选框,则它不会对表单提交时发送的数据做出贡献.

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

如果满足以下任何条件,则跳过此元素的这些子步骤:[...]

field元素是一个input元素,其type属性处于Checkbox状态,其checkedness为false.

然后on如果value缺少则指定默认值:

否则,如果field元素是type属性处于Checkbox状态或Radio Button状态的input元素,则运行这些进一步嵌套的子步骤:

如果field元素指定了value属性,则let value为该属性的值; 否则,让值为字符串"on".

因此,在表单数据构造期间将跳过未选中的复选框.

HTML4下需要类似的行为.从所有兼容的浏览器中预期这种行为是合理的.

Answer 4

当且仅当选中复选框时,复选框才会将值"打开".抓住复选框值,您可以使用隐藏的输入

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" />

Answer 5

浏览器的标准行为是否仅在表单提交时检查复选框输入值数据？

是的,因为否则没有可靠的方法来确定是否实际检查了复选框(如果它改变了值,如果检查了所需的值,那么情况可能存在的情况与它的那个相同)交换到).

如果没有提供值数据,默认值是否总是"开启"？

其他答案确认"on"是默认值.但是,如果您对该值不感兴趣,只需使用:

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

Answer 6

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

<input type="hidden" name="foo[]" value="off"/>

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

Answer 7

来自HTML 4规范,几乎所有浏览器都应该保持一致:

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

复选框(和单选按钮)是可由用户切换的开/关开关.当设置了控制元素的checked属性时,开关处于"打开"状态.提交表单时,只有"on"复选框控件才能成功.

成功定义如下:

成功的控制对于提交是"有效的".每个成功的控件都将其控件名称与其当前值配对,作为提交的表单数据集的一部分.必须在FORM元素中定义成功的控件,并且必须具有控件名称.

Answer 8

输入类型=“隐藏”名称=“is_main”值=“0”

输入类型=“复选框”名称=“is_main”值=“1”

所以你可以像我在应用程序中那样进行控制。如果它检查然后发送值 1 否则 0