<input type =“checkbox”/>只检查数据吗?

时间:2012-07-11 00:48:49

标签: html input checkbox

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

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

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

12 个答案:

答案 0 :(得分:164)

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

默认值始终为&#34; on&#34;,这应该在浏览器中保持一致。

W3C HTML 4 recommendation

中介绍了这一点
  

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

答案 1 :(得分:67)

在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

请注意:

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

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

像ASP.NET MVC这样的框架通过(秘密地)将每个checkbox输入与呈现的HTML中的hidden输入配对来解决这个问题,如下所示:

@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输入根本没有被渲染。

答案 2 :(得分:15)

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

HTML5部分4.10.22.4 Constructing the form data set描述了表单数据的构建方式:

  

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

     

field元素是其类型的输入元素   属性处于Checkbox状态,其检查结果为false。

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

  

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

     

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

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

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

答案 3 :(得分:9)

当且仅当选中复选框时,复选框才会在'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" />

答案 4 :(得分:8)

  

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

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

  

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

其他答案确认“开启”是默认值。但是,如果您对该值不感兴趣,请使用:

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

答案 5 :(得分:7)

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

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

  

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

成功定义如下:

  

成功的控制是有效的&#34;提交。每一次成功   control的控制名称与其当前值配对   提交的表单数据集。必须定义成功的控制   在FORM元素中,必须具有控件名称。

答案 6 :(得分:4)

input type =“ hidden” name =“ is_main” value =“ 0”

input type =“ checkbox” name =“ is_main” value =“ 1”

因此您可以像在应用程序中那样进行控制。 如果检查,则发送值1,否则发送0

答案 7 :(得分:3)

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

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

答案 8 :(得分:1)

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

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

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

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

例如,此处有五个动态插入的复选框,表单POSTS包含以下值:

  '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个复选框为onchecked

本质上,虚拟或隐藏输入字段只表示一切都已关闭,除非在关闭索引下面有“on”,然后在没有单行客户端的情况下为您提供所需的索引边码。

答案 9 :(得分:0)

就像ASP.NET变体一样,除了在实际的复选框(同名)之前使用相同名称的隐藏输入。仅发送最后的值。这样,如果选中一个框,则会发送其名称和值“on”,而如果未选中该框,则会发送相应隐藏输入的名称以及您可能想要提供的任何值。最后,您将获得要读取的$ _POST数组,其中包含所有已检查和未检查的元素,“on”和“false”值,没有重复键。易于在PHP中处理。

答案 10 :(得分:0)

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

使用

获取所有未选中的复选框
    /**
     * Fires when preparing to serve an API request.
     *
     * Endpoint objects should be created and register their hooks on this action rather
     * than another action to ensure they're only loaded when needed.
     *
     * @since 4.4.0
     *
     * @param WP_REST_Server $wp_rest_server Server object.
     */

答案 11 :(得分:-2)

我用这段代码解决了这个问题:

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

并检查服务器是否数据发布是&#34; on&#34;或&#34;关闭&#34;。我用过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));
        }