Basic jQuery help
I'm sure I'm going to lose some points for this because this is 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 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 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 jQuery always takes the "else" branch, showing that it doesn't really look at the checkbox state.
What am I doing wrong?
Thanks for staying with me.
source to share
Use this:
if ($(checkBoxControl).attr("checked")) {
instead of this:
if ($("#IsAlwaysValidCheckBox").checked) {
While it looks like jQuery selectors return DOM elements (like checkboxes), they do return a jQuery object that doesn't have a method called checked
. You can see this most clearly in the uncompressed jquery source code (from current version, 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.) work with this.context
which is specified or overridden whenever you use a selector.
source to share
$("#IsAlwaysValidCheckBox").checked
is incorrect as it $("#IsAlwaysValidCheckBox")
returns a jQuery object, not an element. The jQuery object has no property checked
, so it injects else
.
Do you want to:
$("#IsAlwaysValidCheckBox").val()
or
$("#IsAlwaysValidCheckBox:checked").length > 0
or
$("#IsAlwaysValidCheckBox").attr("checked") === "checked"
or
$("#IsAlwaysValidCheckBox")[0].checked
or
$("#IsAlwaysValidCheckBox").get(0).checked
source to share
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 a kind of "cross-element" way of checking the value ... be it a textbox, select a list or checkbox ... you can use .val () to get / set its value :-)
source to share