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

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

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


当前回答

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

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

输入类型="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属性输入根本没有被呈现。

在你的帖子中

 'your_field': your_field.is(':checked'),

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

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

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

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

例如,这里有五个动态插入的复选框,表单post了以下值:

  '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个复选框被选中或选中。

从本质上讲,虚拟或隐藏的输入字段只是表明一切都是关闭的,除非在off索引下面有一个“on”,然后在不需要一行客户端代码的情况下为您提供所需的索引。

.