If element hasClass, check the checkbox using jQuery

Question

I have a class that adds a fake checkbox and using jQuery, once the user clicks it, add the checked state class to the fake checkbox.

CSS

.fake-checkbox {  /* ... */  }
.fake-checkbox.checked-state {  /* ... */  }

HTML

<label>
  <input type="checkbox">
  <div class="fake-checkbox"></div>
</label>

JS

(function($) {
  $('.fake-checkbox').click(function() {
    // Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
    if ($(this).hasClass('checked-state')) {
      $(this).removeClass('checked-state');
    } else {
      $(this).addClass('checked-state');
    }
  });
}(jQuery));

Now, I also want to make the input checkbox in its checked state at the same time when the class is added and in its unchecked state when the class is removed.

I know this can be done with element.checked = true but not in jQuery.

How can I achive this?

EDIT

This is surely different and not a duplicate of this question cause we're in a different case, although there's a similarity about 'ticking a checkbox using jQuery' but still not a possible duplicate.

Thanks.

Answer 1

Besides the jQuery answers, i would like to suggest (for this specific case) a CSS only solution, since the checkbox and the .fake-checkbox are siblings.

CSS

.fake-checkbox {  /* ... */  }
:checked + .fake-checkbox{  /* ... */  }

HTML

<label>
  <input type="checkbox">
  <div class="fake-checkbox"></div>
</label>

Demo

.fake-checkbox {  color:#ccc;  }
:checked + .fake-checkbox{  color:green;  }

<label>
  <input type="checkbox">
  <div class="fake-checkbox">fake</div>
</label>

---

As for a jQuery answer i would suggest you monitor the state of the actual checkbox instead of manually testing the states.

$('label :checkbox').on('change', function(){
  $(this)
    .siblings('.fake-checkbox')
    .toggleClass('checked-state', this.checked);
})

Demo

$('label :checkbox').on('change', function(){
  $(this)
    .siblings('.fake-checkbox')
    .toggleClass('checked-state', this.checked);
})

.fake-checkbox {  color:#ccc;  }
.fake-checkbox.checked-state {  color:green;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
  <input type="checkbox">
  <div class="fake-checkbox">fake</div>
</label>

Answer 2

Try this

$('#yourCheckboxSelector').prop('checked', true);

Answer 3

You can check a checkbox using JQuery. Using the prop method. https://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/

Use this

HTML

<label>
  <input id="real-checkbox" type="checkbox">
  <div class="fake-checkbox"></div>
</label>

JS

(function($) {
  $('.fake-checkbox').click(function() {
    // Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.  
    if ($(this).hasClass('checked-state')) {
        $(this).removeClass('checked-state');      
        $( "#real-checkbox" ).prop( "checked", false );
    } else {
        $(this).addClass('checked-state');
        $( "#real-checkbox" ).prop( "checked", true );
    }
  });
}(jQuery));

Answer 4

As the checkbox is immediate preceding sibling, you can use .prev() then set the property using .prop() method

(function($) {
  $('.fake-checkbox').click(function() {
    // Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.  
    if ($(this).hasClass('checked-state')) {
        $(this).removeClass('checked-state');      
        $(this).prev(':checkbox').prop('checked', false);
    } else {
        $(this).addClass('checked-state');
        $(this).prev(':checkbox').prop('checked', true);
    }
  });
}(jQuery));

Above code can be simplified as

(function($) {
  $('.fake-checkbox').click(function() {
    $(this).toggleClass('checked-state');
    $(this).prev(':checkbox').prop('checked', $(this).hasClass('checked-state'));
  });
}(jQuery));