Applying if and else condition to add and remove class using jQuery

Question

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.

My code as below.

LIVE FIDDLE LINK

Complete working code here

HTML

<div class="customCheckboxBtns">
<div class="ck-button"><label><input checked="checked" name="column-2" type="checkbox">1</label></div>
<div class="ck-button"><label class="selected"><input checked="checked" name="column-3" type="checkbox">2</label></div><!-- This is how it will be added dynamically -->
<div class="ck-button"><label><input checked="checked" name="column-4" type="checkbox">3</label></div>
<div class="ck-button"><label><input checked="checked" name="column-5" type="checkbox">4</label></div>
<div class="ck-button"><label><input checked="checked" name="column-6" type="checkbox">5</label></div>
</div>

CSS

.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;    
}

SCRIPT

$('.ck-button label').on('click', function () {
    $(this).addClass('selected');    
});

$('.ck-button label').on('click', function () {
    $(this).removeClass('selected');
});

Thanks for the quick reply, but it does not work - https://jsfiddle.net/zdwjnLvL/1/ — Nitesh, Jul 27 '16 at 08:47
Not sure why am I downvoted .. Would appreciate a good genuine reason — Nitesh, Jul 27 '16 at 08:48

VisioN · Accepted Answer · 2016-07-27T08:58:35.227

Since you are trying to replicate checkbox behaviour, I would probably use something like that:

$('.ck-button input').on('change', function() {
  $(this.parentNode).toggleClass('selected', this.checked);
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="customCheckboxBtns">
  <div class="ck-button">
    <label>
      <input name="column-2" type="checkbox">1</label>
  </div>
  <div class="ck-button">
    <label class="selected">
      <input checked="checked" name="column-3" type="checkbox">2</label>
  </div>
  <div class="ck-button">
    <label>
      <input name="column-4" type="checkbox">3</label>
  </div>
  <div class="ck-button">
    <label>
      <input name="column-5" type="checkbox">4</label>
  </div>
  <div class="ck-button">
    <label>
      <input name="column-6" type="checkbox">5</label>
  </div>
</div>

JSFiddle: https://jsfiddle.net/zdwjnLvL/15/

Please put relevant code when you have working fiddle link. If not then at least hide the snippet. — Rajesh, Jul 27 '16 at 09:04
Thank you @VisioN .. It works fine on my environment .. +1 as well as accepted the answer — Nitesh, Jul 27 '16 at 09:14

score 1 · Answer 2 · edited May 23 '17 at 12:32

1

The following should work:

 $('.ck-button label').on('click', function (event) {
      event.preventDefault();
      $(this).toggleClass("selected"); 
 });`

https://jsfiddle.net/YvCil/zdwjnLvL/5/

Although this will not check the checkbox. When you have the click handler on the label it will fire for both the label and checkbox. See Jquery click event triggers twice when clicked on html label

edited May 23 '17 at 12:32

Community

1
1

answered Jul 27 '16 at 08:53

Yvo Cilon

372
3
14

Thanks for your efforts +1 .. @VisioN's answered worked on my environment. – Nitesh Jul 27 '16 at 09:14

Gerrit Bertier · Answer 3 · 2023-05-23T13:03:08.027

The issue is that the click handler is fired twice when you click a label. When you click the label, it triggers the click handler, but it also send a click to the associated input checkbox. That click bubbles up to it's containing elements, the label, causing the click handler to fire again.

You may want to listen to the click or change event on your input checkboxes, in stead of the label. This is also good for accessability, as it will still change your input value, and allow users to do so using the keyboard.

Javascript excerpt

$('.ck-button input[type="checkbox"]').change(function() {
  $(this).closest('label').toggleClass('selected');
});

Sample

$('.ck-button input[type="checkbox"]').change(function() {
  $(this).closest('label').toggleClass('selected');
});

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="customCheckboxBtns">
  <div class="ck-button"><label><input checked="checked" name="column-2" type="checkbox">1</label></div>
  <div class="ck-button"><label class="selected"><input checked="checked" name="column-3" type="checkbox">2</label></div>
  <div class="ck-button"><label><input checked="checked" name="column-4" type="checkbox">3</label></div>
  <div class="ck-button"><label><input checked="checked" name="column-5" type="checkbox">4</label></div>
  <div class="ck-button"><label><input checked="checked" name="column-6" type="checkbox">5</label></div>
</div>

Thanks for your efforts +1 .. @VisioN's answered worked on my environment. — Nitesh, Jul 27 '16 at 09:14

Applying if and else condition to add and remove class using jQuery

3 Answers3