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.

Possible duplicate of Setting "checked" for a checkbox with jQuery? — jonhopkins
– jonhopkins, Commented Sep 26, 2016 at 12:31
I would urge you to look at another one of your answers: stackoverflow.com/a/39703074/2117156 — Jamie Barker
– Jamie Barker, Commented Sep 26, 2016 at 12:49

Gabriele Petrioli · Accepted Answer · 2016-09-26 12:43:12Z

2

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>

edited Sep 26, 2016 at 12:43

answered Sep 26, 2016 at 12:38

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jamie Barker Over a year ago

I'm guessing that in practice, the actual checkbox is hidden.

Gabriele Petrioli Over a year ago

@JamieBarker it doesn't matter, since they are contained in a label. Wherever you click in the label it will toggle the checkbox.

Chain Trap Over a year ago

Thanks but on one of your codes, there are times that the elements are not contained in a label so I use the .click() event not .change(). +1

Gabriele Petrioli Over a year ago

@ChainTrap that is cool. I was going with the original html in your question. Whatever works better :)

Satpal · Accepted Answer · 2016-09-26 12:34:39Z

0

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));

edited Sep 26, 2016 at 12:34

answered Sep 26, 2016 at 12:32

Satpal

134k13 gold badges168 silver badges171 bronze badges

5 Comments

Rayon Over a year ago

This could be simplified as $(this).hasClass('checked-state') is a Boolean value, toggleClass could be used...I was suggesting .toggleClass( className, state ) approach...

Chain Trap Over a year ago

I'll try this one. Will be back soon :)

Chain Trap Over a year ago

Thanks for this :)

Chain Trap Over a year ago

@Satpal Also, there's a conflict for :checkbox that already has the checked attribute. On first click, the class is removed but :checkbox is still checked, then on another clicks it became opposite (when the class is added, :checkbox is not checked` and vice versa). How can I fix this?

Chain Trap Over a year ago

@Satpal It was working on a :checkbox which is not contained in a <label>. I've made a fiddle using Bootstrap 3 framework. Please see it and tell me what's wrong with it. Thank you.

Aleksandar Matic · Accepted Answer · 2016-09-26 12:31:17Z

0

Try this

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

answered Sep 26, 2016 at 12:31

Aleksandar Matic

7991 gold badge9 silver badges21 bronze badges

Comments

Isabel Inc · Accepted Answer · 2016-09-26 12:32:16Z

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));

Collectives™ on Stack Overflow

If element hasClass, check the checkbox using jQuery

4 Answers 4

4 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related