jQuery 基本帮助

Question

我确信我会为此失去一些代表点，因为这是一个非常基本的问题，但我无法弄清楚使用“#”按 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”分支，表明它并没有真正查看复选框的状态。

我做错了什么？

感谢您对我的包容。

Answer 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 上运行，每当您应用选择器时都会指定或重新定义它。