title: Applying if and else condition to add and remove class using jQuery
body: <p>I have created the below code where I want to create an if/else condition where when the user clicks on the label, a class would be added and when unclicks, that class would be removed. I am stuck-up applying the same.</p>
  
  <p>My code as below.</p>
  
  <p><strong>LIVE FIDDLE LINK</strong></p>
  
  <p><strong><a href="https://jsfiddle.net/zdwjnLvL/" rel="nofollow">Complete working code here</a></strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="customCheckboxBtns"&gt;
  &lt;div class="ck-button"&gt;&lt;label&gt;&lt;input checked="checked" name="column-2" type="checkbox"&gt;1&lt;/label&gt;&lt;/div&gt;
  &lt;div class="ck-button"&gt;&lt;label class="selected"&gt;&lt;input checked="checked" name="column-3" type="checkbox"&gt;2&lt;/label&gt;&lt;/div&gt;&lt;!-- This is how it will be added dynamically --&gt;
  &lt;div class="ck-button"&gt;&lt;label&gt;&lt;input checked="checked" name="column-4" type="checkbox"&gt;3&lt;/label&gt;&lt;/div&gt;
  &lt;div class="ck-button"&gt;&lt;label&gt;&lt;input checked="checked" name="column-5" type="checkbox"&gt;4&lt;/label&gt;&lt;/div&gt;
  &lt;div class="ck-button"&gt;&lt;label&gt;&lt;input checked="checked" name="column-6" type="checkbox"&gt;5&lt;/label&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.customCheckboxBtns{
      margin-bottom: 1rem;
      margin-top: 0.25rem;
      overflow:auto;
  }
  
  .ck-button {
      margin-right: 0.375rem;
      background-color:#ffffff;
      border-radius:4px;
      border:1px solid #26a69a;
      overflow:auto;
      float:left;
      font-family: 'Source Sans Pro', sans-serif;
      transition: all 0.2s ease 0s;
      color:#999999;
  }
  
  .ck-button:hover {
      background:#7dcac2;
      border:1px solid #26a69a;
      color:#26a69a;
      background-color:#ffffff;
  }
  
  .ck-button label {
      text-align:center;
      padding: 0.25rem 0.5rem;
      display:block;
      background:#26a69a;
      color:#ffffff;
      transition: all 0.2s ease 0s;
  }
  .ck-button label:hover{
      cursor:pointer;
  }
  .ck-button input:checked {
      background: #26a69a none repeat scroll 0 0; 
      color: #ffffff;
      padding: 0.25rem 0.5rem;
      transition: all 0.2s ease 0s;
  }
  .ck-button label:hover{
      background: #7dcac2 none repeat scroll 0 0;
      color:#ffffff;  
  }
  .ck-button label input {
      position:absolute;
      /*top:-2000px;*/
  }
  .ck-button label input[type="checkbox"] {
      position: absolute;
      visibility: hidden;
  }
  label.selected{
      background: #7dcac2 none repeat scroll 0 0;
        color:#ffffff;    
  }
  </code></pre>
  
  <p><strong>SCRIPT</strong></p>
  
  <pre><code>$('.ck-button label').on('click', function () {
      $(this).addClass('selected');    
  });
  
  $('.ck-button label').on('click', function () {
      $(this).removeClass('selected');
  });
  </code></pre>