jQuery 基本帮助答案

【问题标题】：jQuery basic helpjQuery 基本帮助
【发布时间】：2009-10-19 14:47:19
【问题描述】：

我确定我会为此失去一些代表点，因为这是一个非常基本的问题，但我无法弄清楚我在使用“#”通过 id 选择的 jQuery 选择器上做错了什么.

鉴于我的文档中的这个元素：

<%= Html.CheckBox("IsAlwaysValid", true,
                    new { onchange = "showHideValidSetList()", id = "IsAlwaysValidCheckBox" })%>

（输出以下标记：

<input checked="checked" id="IsAlwaysValidCheckBox" name="IsAlwaysValid" onchange="showHideValidSetList()" type="checkbox" value="true" /><input name="IsAlwaysValid" type="hidden" value="false" />

)

然后这个函数使用一个 jQuery 选择器：

<script type="text/javascript">
    function showHideValidSetList() {
        if ($("#IsAlwaysValidCheckBox").checked) {
            alert("IsAlwaysValidCheckBox is checked");
            return;
        }
        else {
            alert("IsAlwaysValidCheckBox is NOT checked");
            return;
        }
    }
</script>

应该完全等同于使用 javascript DOM 的这个：

<script type="text/javascript">
    function showHideValidSetList() {
        if (document.getElementById("IsAlwaysValidCheckBox").checked) {
            alert("IsAlwaysValidCheckBox is checked");
            return;
        }
        else {
            alert("IsAlwaysValidCheckBox is NOT checked");
            return;
        }
    }
</script>

对吗？但是 javascript 版本按预期工作，而 jQuery 版本总是采用“else”分支，表明它并没有真正查看复选框的状态。

我做错了什么？

感谢您对我的包容。

【问题讨论】：

仅供参考，我们不会拒绝“愚蠢”的问题；没有了。我们可能会否决重复的内容；-)

标签： jquery jquery-selectors

【解决方案1】：

使用这个：

if ($(checkBoxControl).attr("checked")) {

而不是这个：

if ($("#IsAlwaysValidCheckBox").checked) {

虽然看起来 jQuery 选择器返回 DOM 元素（如复选框），但它们实际上返回的是一个 jQuery 对象，它没有名为 checked 的方法。在未压缩的 jquery 源代码（来自the current release, version 1.3.2）中可以最清楚地看到这一点：

jQuery.fn = jQuery.prototype = {
    init: function( selector, context ) {
        // ...
        // Handle $(DOMElement)
        if ( selector.nodeType ) {
             this[0] = selector;
             this.length = 1;
             this.context = selector;
             return this;
        }
        // ...
    }
}

许多有趣的 jQuery 方法（如 animate、attr、html 等）都在 this.context 上运行，每当您应用选择器时都会指定或重新定义它。

【讨论】：

谢谢，杰夫（以及其他所有回复的人）。我不明白返回 jQuery 对象和返回选定元素之间的区别。
我的荣幸 - 我喜欢 jQuery，但在核心文档中解释这个成语并不会杀死他们。 :)

【解决方案2】：

$("#IsAlwaysValidCheckBox").checked

不正确，因为$("#IsAlwaysValidCheckBox") 返回的是 jQuery 对象，而不是元素。 jQuery 对象没有名为checked 的属性，这就是它进入else 的原因。

你想要的：

$("#IsAlwaysValidCheckBox").val()

或：

$("#IsAlwaysValidCheckBox:checked").length > 0

或：

$("#IsAlwaysValidCheckBox").attr("checked") === "checked"

或：

$("#IsAlwaysValidCheckBox")[0].checked

或：

$("#IsAlwaysValidCheckBox").get(0).checked

【讨论】：

【解决方案3】：

你尝试过使用

if ($("#IsAlwaysValidCheckBox").attr("checked")) {

【讨论】：

【解决方案4】：

你需要使用这个：

$("#IsAlwaysValidCheckBox").attr("checked")

判断复选框是否被选中。

【讨论】：

【解决方案5】：

另一种做简单事情的方法：

$('#IsAlwaysValidCheckBox:checked').length

selector:checked 是 jquery 特有的，用于返回一个选中的元素。长度检查是否有任何元素返回。

许多方法可以做同样的事情。

【讨论】：

【解决方案6】：

试试这个：

<script type="text/javascript">
    function showHideValidSetList() {
        if ($("#IsAlwaysValidCheckBox").val()) {
            alert("IsAlwaysValidCheckBox is checked");
            return;
        }
        else {
            alert("IsAlwaysValidCheckBox is NOT checked");
            return;
        }
    }
</script>

val 方法是一种检查值的“跨元素”方式...无论是文本框、选择列表还是复选框...您都可以使用 .val() 来获取/设置它的价值:-)

【讨论】：