Learn jQuery addclass removeclass methods onclick

Using the jQuery addClass() and removeClass() methods, we can dynamically add/remove css class(es) of an HTML element. The addClass method does not replace any existing classes but appends to them. The removeClass method removes the css classes of an element if exists. To add/remove more than one class at a time separate them with a space.

Here goes the syntax for addClass() removeClass() methods,

Example

I want to change the color and size of the texts in a page when a checkbox is checked. To accomplish this, I'm going to write a css class and add it when the checkbox is checked and remove it when unchecked.

So I'll create a html page and add a checkbox and a paragraph element.

HTML Markup

<input id="colors" type="checkbox"><label>Red</label>
<p>I am a text</p>

Next add these CSS styles to the page.

CSS Styles

p {
     color: black;
     font-size: 24px;
}

.red {
     color: red;
     font-size: 30px;
     font-weight: bold;
}

Next write the jQuery script for toggling the css class named "red".

jQuery Script

$("#colors").click(function() {
     if ($("#colors").is(':checked'))
          $("p").addClass("red");
     else
          $("p").removeClass("red");
});

Here is the complete code for the example.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Add Remove Class Demo</title>
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.2.js"></script><!--include jquery library-->
<style>
p {
     color: black;
     font-size: 24px;
}

.red {
     color: red;
     font-size: 30px;
     font-weight: bold;
}
</style>
</head>
<body>
     <input id="colors" type="checkbox" /><label>Red</label>
     <p>I am a text</p>

     <script type="text/javascript">
     $("#colors").click(function() {
          
          if ($("#colors").is(':checked'))
               $("p").addClass("red");
          else
               $("p").removeClass("red");
     });
     </script>
</body>
</html>

That's it. Hope you'd have enjoyed this jQuery tutorial for addclass removeclass methods. Meet you soon in another one interesting tutorial.

Last Modified: May-25-2015