提交表单时，HTML输入复选框返回“On”而不是“True”。

Question

我有一个使用“Project Awesome”（http://awesome.codeplex.com/）的MVC3应用程序，但是复选框出现了奇怪的行为。 我在Modal弹出窗口中使用了以下简单的Html： <input type="checkbox" class="check-box" name="IsDeleted">。

当我提交包含此元素的表单时，它的post值是“on”，而不是预期的“true”（当元素被选中时）。

有人知道这是为什么吗？ 我认为可能会有一些JavaScript干扰表单数据，但想检查是否缺少一些HTML。

谢谢

- user460667

---

我在使用 e.target.value 时遇到了这个问题，实际上应该使用 e.target.checked。希望这能帮助到某些人。 - fungusanthrax

Answer 1

将复选框的value属性设置为true，您将在提交时得到true的值。

- Niklas

---

仅当用户勾选该框时，此内容才为真。如果未勾选，则不会发布任何内容。另外，MVC的绑定机制会将该复选框的值设置为null，如果没有针对该复选框发布任何内容的话。 - Miguel

<label><input type="checkbox" id="SomeID" name="SomeName" onclick="CBSelectedValueToTrue(this);" >重量</label>......function CBSelectedValueToTrue(cb) { if (cb.checked) { cb.value = "true"; } } - BriOnH

这样做会返回“true”，但永远不会返回“false”值。 - Wouter Vanherck

Answer 2

我想这取决于浏览器，在值为未定义时要发送什么。你需要在单选框/复选框上定义value属性，以确保将传回给你的内容。我建议使用value="1"。

- mkilmanas

Answer 3

默认情况下，将 data-val="true" and value="true" 设置为真... 如果复选框被选中，则返回 true

- Otto Kanellis

Answer 4

检查复选框是否被选中，如果选中则将隐藏字段设置为True，否则设置隐藏字段为False。

$('#hiddenFieldId').val($('#CheckBoxId').attr('checked')=='checked')

- Siddhartha

Answer 5

你应该只检查它是否被设置了 - 发送的值是无关紧要的，如果不进行检查，则在POST时根本没有发送任何内容。

- Michael Wright

---

这个在W3C规范中有说明吗？我认为这取决于浏览器。 - sferencik

Answer 6

什么都没用！ 在将对象序列化后，我最终采用了一种hacky的方式，在提交到控制器/操作之前查看它。如果任何人在其中放置了可能包含“＆”的文本框，则不安全。在我的情况下，我有一个复选框数组，所以在确信不会出现问题后，我进行了这个hack。

var formData = $("#form").serialize();
formData = formData.replaceAll('=on&','=true&');
if (formData.endsWith('=on'))
{
 formData = formData.substring(0, formData.length - 3) + "=true";
}

希望能对那些和我类似情况的“某人”有所帮助。愉快的编程。

- Riyaz Hameed

Answer 7

如果你这样做：

const checkbox = document.getElementById("myCheckbox");
console.log(checkbox.value);

你将得到输出的是on而不是true或false

然后改为：

const checkbox = document.getElementById("myCheckbox");
console.log(checkbox.checked);

它将打印一个布尔值。

- geniusvale

Answer 8

使用jQuery进行跨浏览器判断，它会返回true或false。

$('#check-box-id').attr('checked' ) == true

如果你的复选框有一个ID check-box-id。对于你当前的版本，请使用下一个（通过类名选择）：

$('.check-box').attr('checked' ) == true

- sergzach

Answer 9

在HTML中，在复选框上方添加一个input type="hidden"。

<input name="active" id="activeVal" type="hidden">
<input id="active" type="checkbox">

然后，添加以下脚本：

$('#activeVal').val($('#active').is(':checked'));
$('#active').change(function() {
     $('#activeVal').val($('#active').is(':checked'));
});

当你在jQuery中执行例如$('#your-form').serialize()时，当复选框被选中时，你将得到active: true的值，否则为active: false。

- Trang Tran Thi My

Answer 10

使用jQuery

var out=$('.check-box').is('checked')

如果复选框被选中，则返回true；否则返回false。

- Venkat