如果在表单提交时勾选复选框输入值数据,浏览器是否仅发送复选框输入值数据是标准行为?
如果没有提供值数据,默认值是否总是“on”?
假设上述假设是正确的,那么所有浏览器的这种行为是否一致呢?
如果在表单提交时勾选复选框输入值数据,浏览器是否仅发送复选框输入值数据是标准行为?
如果没有提供值数据,默认值是否总是“on”?
假设上述假设是正确的,那么所有浏览器的这种行为是否一致呢?
当前回答
同样的问题,未选中的复选框将不会在表单提交时发送,我提出了另一种解决方案,而不是镜像复选框项目。
获取所有未选中的复选框
var checkboxQueryString;
$form.find ("input[type=\"checkbox\"]:not( \":checked\")" ).each(function( i, e ) {
checkboxQueryString += "&" + $( e ).attr( "name" ) + "=N"
});
其他回答
当且仅当复选框被选中时,复选框将发布值“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" />
以上答案没有一个让我满意。 我发现最好的解决方案是在每个具有相同名称的复选框输入之前包含一个隐藏输入。
<输入类型=“隐藏”
<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',
)
从HTML 4规范,应该是一致的几乎所有浏览器:
http://www.w3.org/TR/html401/interact/forms.html#checkbox
复选框(和单选按钮)是可以切换的开/关开关 由用户决定。当控制元件被检查时,开关是“打开”的 属性已设置。当提交表单时,只有“on”复选框 控制可以成功。
成功的定义如下:
一个成功的控件是“有效的”提交。每一个成功的 控件的控件名与其当前值配对,作为 提交的表单数据集。必须定义一个成功的控件 在FORM元素中,并且必须有控件名。
输入类型="hidden" name="is_main" value="0"
输入类型="checkbox" name="is_main" value="1"
所以你可以像我在应用程序中那样控制。 如果检查成功,则发送值1,否则为0
在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属性输入根本没有被呈现。