jQuery瓦尔()和复选框

1wnzp6jl  于 2023-01-01  发布在  jQuery
关注(0)|答案(8)|浏览(185)

val()对于复选框控件毫无用处,而对于跨所有其他输入控件一致地获取输入数据却很有用,这有什么道理吗?
例如,对于复选框,at似乎 * 总是返回“on”,而不管复选框的状态如何。* 对于实际上没有“value”属性的其他输入控件,例如select和textarea,它的行为与您预期的一样。请参见:
http://jsfiddle.net/jamietre/sdF2h/4/
我想不出一个很好的理由来解释为什么它不返回truefalse。如果做不到这一点,至少只在选中时返回“on”,而在不选中时返回一个空字符串。如果做不到这一点,至少总是返回一个空字符串,因为复选框没有value属性!
显然,我知道如何使用attr获得值,但情况是这样的。(到目前为止)C# jQuery实现在服务器上进行HTML解析,我试图完全忠实于jQuery的实现,以便它在客户机或服务器上对同一DOM的行为一致。我很难让自己无论如何都能编写“value”来返回复选框的“ON”。但是如果我不这样做,它将不一致。所以我试图理解,这样做有什么原因吗?它有什么目的吗?或者它仅仅是某种工件?会有人对复选框使用val()方法吗?如果会,为什么?如果不会,为什么jQuery架构师决定使用这种方法使其无用?

iyzzxitl

iyzzxitl1#

我想不出一个很好的理由来解释为什么它不返回true或false。如果做不到这一点,至少只在选中时返回“on”,而在不选中时返回空字符串。如果做不到这一点,至少总是返回空字符串,因为复选框没有value属性!
复选框确实有一个value属性。它在表单中的多个复选框中很常见,例如:

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

然后当用户提交表单时,服务器可以通过检查foo[]数组的值来解析选中了哪些复选框,无论是否选中,复选框的值都不会改变;浏览器不会把未选中的复选框的值发送到服务器。如果你在jQuery中使用$('#your-form').serialize(),它的工作原理应该是类似的;它不应该包含未选中复选框的值。如果您省略了复选框的值,它将默认为on
如果要检查jQuery中是否选中了单个复选框,最好的描述性方法是执行$(this).is(':checked')

af7jpaap

af7jpaap2#

您说“复选框没有value属性”。相反:value属性是可选的**,复选框和单选框上的**除外。
根据W3C规范:
[the value属性]是可选的,除非type属性的值为“radio”或“checkbox”
on是在忽略规范且未设置value属性时浏览器为元素提供的默认值。
您需要记住该值的含义:当表单提交时,它与元素的name一起发送到服务器。如果没有选中它,则不发送该值。因此,值on仅在选中复选框时发送。

yrefmtwq

yrefmtwq3#

也许这会有所帮助

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

});

使用input[type=checkbox]选择input type="checkbox",因为复选框为,并输入type ="checkbox"
并将value属性放到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>

但前一个似乎增加了更多的动态和不那么乏味(我会相信)。
至于"胶囊"的问题

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

返回值on,我认为这是复选框的默认值。
第二个实验也给出了on值。
"我希望我没有错"

yfwxisqw

yfwxisqw4#

如果你传递一个数组给瓦尔函数,如果复选框的值与数组中的值匹配,它会将复选框设置为选中。http://api.jquery.com/val/#val-value

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

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

wbgh16ku5#

复选框具有与文本框相同的值,并且仅当在提交表单时选中复选框时,才会在提交表单时将此值发送到服务器。
与文本框不同,复选框具有 defaulton-当复选框被选中时,该值被发送到服务器,但复选框本身没有value,因此处理代码可以知道它被选中。
因此.val()方法工作正常,返回元素的值。
你是对的,jQuery缺少一种简单的方法来查看是否选中了特定的复选框/单选按钮,比如$("#mycheckbox").checked(),但这正是我们有插件的目的。

ukqbszuj

ukqbszuj6#

复选框并不总是单独的,它的值在提交表单时传递(否则,名称/值根本不传递)。
这在使用复选框创建数组时非常有用,您可以使用name="test[]"作为它们的名称,并在每个复选框中设置不同的值。在解析提交的结果时,您最终会得到一个包含所有选中值的数组

7nbnzgx9

7nbnzgx97#

您可以对jquerys的val函数做一些修改,使其像这样工作。无论是否没有值属性,都返回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
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
cwxwcias

cwxwcias8#

您可以考虑使用隐藏输入,包含您想要检索的值,沿着复选框,它将在“input”和“change”事件中使用您想要的任何值来更改输入的值。

something
 .append( $("<INPUT/>")
   .prop("type", "hidden")
   .addClass("mycheckboxvalue")
   .val("initial value")
 )
 .append( $("<INPUT/>")
   .prop("type", "checkbox")
   .prop("checked", initial_state)
   .on("input change", function() {
     $(".mycheckboxvalue").val(
       $(this).is(":checked")?
         "checked value":
         "unchecked value"
     )
   })
 )

相关问题