Determining the Element Clicked on in jQuery

In jQuery, you can easily find out when an element itself is clicked on, but binding with the click event, like so...

$('#MyElement').click(function(event) {
console.log("I just clicked the element with the id of Myelement!");
});

But in more complicated scenarios, several elements will trigger a shared function, and you need to know which element was clicked from that shared function.

That would be like this...

$('#MyElement').click(function(event) { return doSomething(event);}
$('#MyOtherElement').click(function(event) { return doSomething(event);}

In this case, you could find out which element was clicked by using the event object...

function doSomething(event) {
console.log("Just clicked the element with an id of..." + event.target.id);
}

The event.target object will tell you almost everything you need to know about what was clicked.

Capturing a Key-Press/Key-Down Event for the Enter Key in jQuery

You may want to capture an enter key action whenever the user hits the enter key. This can be used to submit a form without having to use the mouse, or it can provide some other feature.

To do this, we bind the keydown() event to the document, and check the event to make sure it is 13 (the enter key). A different integer represents a different key (27 is the escape key, etc.).

We do the binding like this...

$(document).keydown(function(event) {
if (event.which === 13) {
// do something now that the enter key is hit
}
});

You can also use the keypress() event. But there is a problem with keypress -- this event does not fire for the escape key, or the up-down arrows. It only fires for keys whose purpose is to create a character.

Using jQuery to Change or Set Background-Color

You can change the background-color of any element easily in jQuery. All you need is any of these...

$(this).css('background-color', 'red'); // red
$(this).css('background-color', '#000'); // black
$(this).css('background-color', '#00FF00'); // green

If you are not dealing with a jQuery event-handler (where "this" is available), you can use a selector to get and adjust any element's background-color, like so...

$("#MyElementId").css('background-color', 'red'); // red
$("#MyElementId").css('background-color', '#000'); // black
$("#MyElementId").css('background-color', '#00FF00'); // green

Not only can you change any background color now, but you can use the same process to adjust any part of an element's style.

Detect a CheckBox's Checked Status in JavaScript or jQuery

Checkboxes are an important part of forms, and knowing whether they are checked, in JavaScirpt and jQuery, can be very useful.

Standard checking in JavaScript is very simple...

console.log("Checked status?" + document.getElementById('MyCheckBox').checked);

Checking in jQuery is similarly not very difficult...

console.log("Checked status?" + $('#MyCheckBox').is(":checked"));

If you have a newer version of jQuery (v. 1.6+), the following will also work...

console.log("Checked status?" + $('#MyCheckBox').prop('checked'));

Make sure not to mix these up, or you will get bad results. jQuery selectors return an array of matched elements. If you try to look at $('#MyCheckBox').checked, you will always see false, whereas $('#MyCheckBox')[0].checked would be more likely to work.