jQuery val()和复选框

Question

是否有一些理由对于val()复选框控件无用,而对于在每个其他输入控件上一致地获取输入数据是有用的？

例如,对于复选框,无论复选框状态如何,at似乎始终返回"on".对于实际上没有"value"属性的其他输入控件,例如select和textarea,它的行为与您期望的一样.看到:

http://jsfiddle.net/jamietre/sdF2h/4/

我想不出一个很好的理由,为什么它不会回来true或false.如果失败了,至少只有在选中时才会返回"on",而在没有时则返回空字符串.如果失败了,至少总是返回一个空字符串,因为复选框没有value属性!

显然我知道如何使用价值attr,但这是情况.我正在开发一个简单的(迄今为止无论如何)C#jQuery实现来在服务器上进行HTML解析,我正在努力完全忠实于jQuery的实现,因此它在客户端或服务器上针对相同的DOM表现一致.但这似乎很愚蠢,我很难让自己实际编码"值",无论如何都要为复选框返回"ON".但如果我不这样做,那就不一致了.所以我想了解,有这样做的原因吗？它是出于某种目的,还是仅仅是某种神器？有人val()会对复选框使用该方法,如果是这样,为什么？如果没有,为什么jQuery架构师决定使用这种方法使其无用？

Answer 1

我想不出一个很好的理由,为什么它不会返回真或假.如果失败了,至少只有在选中时才会返回"on",而在没有时则返回空字符串.如果失败了,至少总是返回一个空字符串,因为复选框没有值属性!

复选框具有值属性.在例如使用它是很常见的.表单中的多个复选框,例如:

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

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

如果你想检查是否在jQuery中选中了一个单独的复选框,那么最好的描述方法就是这样做 $(this).is(':checked')

Answer 2

你说"复选框没有value属性".相反:除了复选框和单选框之外,该value属性是可选的.

从W3C规范:

[ value属性]是可选的,除非type属性的值为"radio"或"checkbox"

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

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

Answer 3

也许这应该有所帮助

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

});

使用input[type=checkbox]选择input type="checkbox",因为复选框,并输入类型="复选框"

并且还将值属性设置为复选框.

在jsfiddle

UPDATE

<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价值.

我希望我没错.