jQuery onClick Event Examples

In jQuery, Tips and Tricks by March 24th, 2013

654 Views

Wondering how to use the jQuery onclick event? Do you wish to execute some custom code on click of a button, a hyperlink, etc.? If yes, then this article is for you. In this article, I am going to share easy examples that show how to trigger an action when an element on a web page is clicked.

How to use the jQuery onClick event

Let’s look at how to use the it by using means of examples. Let’s assume that we have different elements in a web page such as button, image, hyperlink, div, etc. We will see different variations of the on click event.

Common HTML Source for all the following examples:

Example 1: Toggle div on button click event

Example 2: Add class to p on button click event

Example 3: Alert the count of list items on button click event

Example 4: Prevent hyperlink navigation even if the link is clicked

Example 5: Alert the href value of a hyperlink on hyperlink click event

Example 6: Alert the values of all checked checkboxes on button click event

Example 7:  Reload page when button is clicked

Example 8: Redirect to a different URL when button is clicked

Your Turn!

Do you know of any other ways to use the jQuery on click event? Feel free to suggest by commenting below.