jQuery onClick Event Examples

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:

<style type="text/css">
#my_div1  {
	background-color: #3C6;
	border: 1px solid #090;
}

.custom_class {
	background-color: #FC9;
	border: 1px solid #F90;
}	
</style>

	<div id="my_div1">This is my existing Div 1.</div>

    <input type="submit" name="sbt_show_hide_div" id="sbt_show_hide_div" value="Hide/Show DIV on Button Click">

	<p id="para1">This is a Paragraph 1.</p>

	<input type="submit" name="sbt_add_class2p" id="sbt_add_class2p" value="Add Class to PARAGRAPH  on Button Click">

<ul>
    <li>List Item</li>
    <li>List Item</li>    
    </ul>

<input type="submit" name="sbt_alert_li_items_count" id="sbt_alert_li_items_count" value="Alert the number of LIST ITEMS on Button Click">

<p>
<a href="http://www.theextremewebdesigns.com" class="no_navigate">Click me Go to theextremewebdesigns.com</a>	</p>
<p>
  <input type="submit" name="sbt_alert_href" id="sbt_alert_href" value="Alert the href value of the above link on Click of Button">    
</p>

<p>
      <label>
        <input type="checkbox" name="states" value="Texas" id="states_0">
  Texas</label>
      <br>
      <label>
        <input type="checkbox" name="states" value="Alabama" id="states_1">
        Alabama</label>
      <br>
      <label>
        <input type="checkbox" name="states" value="Florida" id="states_2">
        Florida</label>

</p>
<p>
  <input type="submit" name="sbt_alert_checked_checkbox_val" id="sbt_alert_checked_checkbox_val" value="Alert Values of all Checked Checkboxes onClick of Button">    
</p>

<p>
  <input type="submit" name="sbt_reload_page" id="sbt_reload_page" value="Reload this page On Click of Button">    
</p>

<p>
  <input type="submit" name="sbt_onclick_redirect" id="sbt_onclick_redirect" value="Redirect to a URL when button is clicked">    
</p>

<script type="text/javascript">

$(document).ready(function(){

//Place all your jQuery code here 

});

</script>

Example 1: Toggle div on button click event

//Toggle div when button is clicked 
$('#sbt_show_hide_div').on("click", function(e){

	$("#my_div1").toggle();

	e.preventDefault();

});

Example 2: Add class to p on button click event

//Add class to p when button is clicked
$('#sbt_add_class2p').on("click", function(e){			

	$("#para1").addClass("custom_class");			

	e.preventDefault();		

});

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

//Get the count of list items when button is clicked
$('#sbt_alert_li_items_count').on("click", function(e){			

	alert( $("ul li").length );

	e.preventDefault();

});

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

//Prevent hyperlink navigation even if the link is clicked
$('.no_navigate').on("click", function(e){			

	alert( 'Even though you clicked on a hyperlink, the navigation wont occur as we are using e.preventDefault() to stop it.' );

	e.preventDefault();

});

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

//Get the href value of a hyperlink
$('#sbt_alert_href').on("click", function(e){			

	alert( $('.no_navigate').attr('href') );

	e.preventDefault();

});

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

//Get the values of all checked checkboxes
$('#sbt_alert_checked_checkbox_val').on("click", function(e){			

	$('input[name="states"]:checked').each(function(index) {
	    alert( $(this).val() );
	})

	e.preventDefault();

});

Example 7:  Reload page when button is clicked

//Reload page when button is clicked
$('#sbt_reload_page').on("click", function(e){

	location.reload();

});

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

//Redirect to a different URL when button is clicked
$('#sbt_onclick_redirect').on("click", function(e){

	window.location.href = "http://www.theextremewebdesigns.com";

});

Your Turn!

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