jQuery basic help

Question

I'm sure I'm going to lose some rep points for this, because it's such a basic question, but I can't figure out what I'm doing wrong with jQuery selectors using "#" to select by id.

given this element in my document:

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

(which outputs the following markup:

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

)

Then this function using a jQuery selector:

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

should be exactly equivalent to this one using the 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>

Right? But the javascript version works as expected, while the jQuery one always takes the "else" branch, showing that it's not really looking at the state of the checkbox.

What am I doing wrong?

Thanks for bearing with me.

Answer 1

Use this:

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

instead of this:

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

Though it looks like jQuery selectors return DOM elements (like checkboxes), they really return a jQuery object, which does not have a method called checked. You can see this most clearly in the uncompressed jquery source code (from 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;
        }
        // ...
    }
}

Many of the interesting jQuery methods (like animate, attr, html, etc.) operate on this.context, which is specified or redefined whenever you apply a selector.

Answer 2

try this:

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

the val method is sort of a "cross-element" way of checking the value ... whether it's a textbox, select list, or checkbox ... you can use .val() to get/set the value of it :-)

Answer 3

$("#IsAlwaysValidCheckBox").checked

is incorrect as $("#IsAlwaysValidCheckBox") returns the jQuery object, not the element. The jQuery object has no property called checked which is why it is entering the else.

you want:

$("#IsAlwaysValidCheckBox").val()

or:

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

or:

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

or:

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

or:

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

Answer 4

Did you try using

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

Answer 5

You need to use this:

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

to determine whether the checkbox is checked or not.

Answer 6

Yet another way to do a simple thing:

$('#IsAlwaysValidCheckBox:checked').length

The selector:checked is jquery specific to return a checked element. The length checks if there are any elements returned.

Many ways to do the same thing.