jQuery val() 和复选框答案

【问题标题】：jQuery val() and checkboxesjQuery val() 和复选框
【发布时间】：2011-08-03 00:59:20
【问题描述】：

val() 对于复选框控件无用，而对于在所有其他输入控件中一致地获取输入数据很有用，是否有一些理由？

例如对于复选框，无论复选框状态如何，at 似乎总是返回“on”。对于实际上没有“value”属性的其他输入控件，例如select 和 textarea，它的行为与您预期的一样。见：

我想不出它不返回 true 或 false 的充分理由。如果做不到这一点，至少只有在检查时才返回“on”，否则返回空字符串。做不到这一点，至少总是返回一个空字符串，因为复选框没有value 属性！

显然我知道如何使用attr 获取值，但情况就是这样。我正在开发一个简单的（到目前为止）C# jQuery 实现来在服务器上进行 HTML 解析，并且我试图完全忠实于 jQuery 的实现，以便它在客户端或服务器上针对同一个 DOM 表现一致。但这似乎很愚蠢，无论如何我都很难让自己实际编码“值”来为复选框返回“ON”。但如果我不这样做，它就不会是一致的。所以我试图理解，这样做有什么理由吗？它是出于某种目的，还是仅仅是某种人工制品？有人会对复选框使用val() 方法吗？如果是，为什么？如果不是，为什么 jQuery 架构师决定采用这种方法使其无用？

【问题讨论】：

你也应该关闭你的选项标签
这是最奇怪的，但它是 javascript。只需使用 attr('checked') 即可，遗憾的是您必须保持一致。 :|

标签： jquery

【解决方案1】：

也许这会有所帮助

$(document).ready(function() {
    $('input[type=checkbox]').click(function() {
      alert("val="+$(this).val()+",checked="+$(this).attr('checked'));
    });

});

使用input[type=checkbox] 选择input type="checkbox"，因为checkbox 是并且输入type="checkbox"

并且还将值属性添加到复选框。

开启jsfiddle

更新

<form method="post" action="#">
    PHP<input type="checkbox" name="ch[]" value="PHP"><br/>
    JS<input type="checkbox" name="ch[]" value="JS"><br/>
    JAVA<input type="checkbox" name="ch[]" value="JAVA"><br/>
    PYTHON<input type="checkbox" name="ch[]" value="PYTHON"><br/>
    <input type="submit" name="submit"/>
</form>

还有php

if($_POST){
foreach($_POST['ch'] as $post => $value){
    echo "$post -> $value <br/>";
}
}

它们都具有相同的名称，因为它们是一组共同的按钮。你知道哪些被检查了，哪些没有通过它们的值。

另一种方法是

if($_POST){
    foreach($_POST as $post => $value){
        echo "$post -> $value <br/>";
    }
}

<form method="post" action="#">
    PHP<input type="checkbox" name="PHP"><br/>
    JS<input type="checkbox" name="JS"><br/>
    JAVA<input type="checkbox" name="JAVA"><br/>
    PYTHON<input type="checkbox" name="PYTHON"><br/>
    <input type="submit" name="submit"/>
</form>

但前一个似乎增加了更多的活力和更少的乏味（我相信）。

关于@Capsule 的问题

alert("val="+$(this).val()+",checked="+$(this).attr('checked'));
<input type="checkbox"> Check me.

返回值on 我相信这是复选框的默认值。

第二个实验也给出了on的值。

希望我没有错。

【讨论】：

我链接了错误版本的小提琴，抱歉，已修复。它按照我说的做。
好的，当然，您可以将“值”属性添加到复选框，它会返回该属性。为什么它有用或直观，因为它是一个输入控件？更改的复选框的实际 DATA 是复选框的状态。如果你给一个textarea添加一个“value”属性，例如val()仍然返回textarea的内容，这是合乎逻辑的。行为不一致。
@jamietre 查看其他答案，它们还有很多其他用途，其中复选框必须具有值
@jamietre value 的textarea 是它包裹的文本，而复选框的值在于它的属性。
-1 因为它没有解释为什么值在复选框中很有用，以及为什么 val() 不应该根据选中或未选中状态返回 true 或 false。

【解决方案2】：

我想不出一个很好的理由不会返回真或假。失败那，至少只有在检查，如果没有，则为空字符串。做不到这一点，至少总是回来一个空字符串，给定复选框没有价值属性！

复选框确实具有 value 属性。在例如中使用它很常见。表单中的多选框，例如：

<input type="checkbox" name="foo[]" value="1" />
<input type="checkbox" name="foo[]" value="2" />

然后当用户提交表单时，服务器可以通过检查foo[]数组的值来解析哪些复选框被选中。复选框的值不改变无论是否选中；浏览器根本不会将未选中复选框的值发送到服务器。如果你这样做，例如。 $('#your-form').serialize()在 jQuery 中，它应该类似地工作；它不应包含未选中复选框的值。如果您省略复选框中的值，则默认为on。

如果你想在 jQuery 中检查单个复选框是否被选中，最好的最具描述性的方法是 $(this).is(':checked')

【讨论】：

好的。这就说得通了。天哪。由于asp.net，我已经将自己从HTML中抽象出来很长时间了，我忘记了复选框如何工作的基础知识。
你知道的和我了解的一样多，我仍然认为更直观的方法是返回 true 或 false。如果您愿意，您可以随时使用attr('value')。似乎违背了抽象的目的。
@jamietre 这是你自己的抽象愿景......如果 val() 返回文本输入的值和复选框输入的选中状态，我可能会哭泣并停止使用 jQuery :-)
为什么？如果“val”的目的仅仅是返回“value”属性的内容，那将毫无意义。那不是它的作用。它返回文本区域的内部 HTML、select 列表的选定选项以及...复选框的“值”属性。在所有其他类型的控件中，它返回与当前表单状态相关的信息。文档将 val 描述为：“获取匹配元素集中第一个元素的当前值。”然后继续明确地说..“除了复选框，您可以在其中使用 :checked。”这完全违反直觉。
+1，尽管this.checked 比$(this).is(':checked') 好得多（而且可能快几个数量级）。

【解决方案3】：

一个复选框并不总是单独的，它的值在提交表单时被传递（否则，名称/值根本不会被传递）。

在用复选框制作数组时非常有用，您可以使用name="test[]" 作为它们的名称，并在每个中设置不同的值。解析提交的结果时，您最终会得到一个包含所有检查值的数组

【讨论】：

【解决方案4】：

复选框具有与文本框类似的值，并且仅当在提交时选中复选框时，才会在提交表单时将该值发送到服务器。

与文本框不同，复选框的默认值是 on - 当复选框被选中但没有自己的 value 时发送到服务器，因此处理代码可以知道它被选中了。

所以.val() 方法工作正常，返回元素的值。

你是正确的，jQuery 缺少简单的方法来查看是否选择了特定的复选框/单选按钮，例如 $("#mycheckbox").checked()，但这就是我们有插件的目的。 :)

【讨论】：

【解决方案5】：

您说“复选框没有value 属性”。相反：value 属性在复选框和单选框上是可选的except。

来自the W3C specifications：

[value 属性] 是可选的，除非 type 属性的值为“radio”或“checkbox”

on 是您的浏览器在您忽略规范且未设置value 属性时为元素提供的默认值。

您需要记住该值的含义：在提交表单时将它与元素的name 一起发送到服务器。如果未选中，则不发送该值。因此，on 值仅在选中复选框时发送。

【讨论】：

+1 我们每天都在学习新东西。谢谢寂寞的一天。这很有趣.. 我一直在网络工作，但从未考虑阅读 W3C 的复选框规范，或者有兴趣调查“on”的来源，尽管奇怪的情况让我想到了。（已经通过了许多其他 W3C 规范。）现在我知道了。说得通！而现在完全不同的东西

【解决方案6】：

如果您将数组传递给 val 函数，如果复选框的值与数组中的值匹配，它将设置复选框为选中状态。来源：http://api.jquery.com/val/#val-value

<input id="checkbox" type="checkbox" value="remember">    

$("#checkbox").val(["remember"]);

【讨论】：

我的感觉和@Jamie Treworgy 一样：默认值 true 或 false 会更有意义。

【解决方案7】：

您可以对 jquery 的 val 函数进行一些手术以使其发挥作用。无值 attr 返回 true 或 false。

(function (){
    var jval = $.fn.val
    function superval(value){
        if (value === undefined){
            if (this.is("input") && this.attr("type") == "checkbox"){
                if (this.attr("value")===undefined){
                    return this[0].checked
                }
            }
            return jval.call(this)
        } else {
            return jval.call(this, value)
        }
    }
    $.fn.val = superval
})()

console.log($('<input type="checkbox"/>').val()); // false
console.log($('<input type="checkbox" checked="whatever"/>').val()); // true
console.log($('<input type="checkbox" checked="whatever" value="yes"/>').val()); // yes
console.log($('<input type="text" value="heya"/>').val()); // heya

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：