CODEWITHSUNDEEP
jquerycsscheckbox
Anx
Anx

Reputation: 141

Jquery: Change class of Label based on check/uncheck of checkbox

I have series of checkbox (based on user selection), I am using bootstrap CSS and want to change the class of parent (label). The following code sort of works, it changes the class but it should go back to original once unchecked.

HTML Code:

   <div class="btn-group" data-toggle="buttons">
     <label for="status" class="btn btn-default">
      <input type="checkbox" name="status[]" id="status" value="1"> 
        <span class="glyphicon glyphicon-ok"></span>
     </label>
   </div>

Jquery:

     $('input:checkbox').change(function () {
       if ($(this).prop('checked', true)) {
           $(this).parent().addClass('btn btn-primary');
       } else {
          ($(this).prop('checked', false)); 
           $(this).parent().addClass('btn btn-default');
        }
      });

I tried few alternates, toggleClass etc but its not quite right. I am hoping once the user uncheck's it goes back to original class - btn-default.

Here's the code on jsfiddle: http://jsfiddle.net/#&togetherjs=T34b6tblRc

Help would be greatly appreciated, thank you!

Upvotes: 0

Views: 2551

Answers (5)

Kristina Bressler
Kristina Bressler

Reputation: 1732

Your code on jsfiddle is blank. Please fix it. I would like to view your code in jsfiddle to see how it works.

Upvotes: 0

Glass Cannon
Glass Cannon

Reputation: 514

Add the 'btn btn-default' class manually

$('input').change(function () {
   var b = $(this).is(':checked');
   $(this).parent().addClass(b?'btn-primary':'btn-default');
   $(this).parent().removeClass(!b?'btn-primary':'btn-default');
});

Upvotes: 1

Steven Web
Steven Web

Reputation: 1961

Change your code to:

$('input').change(function () {           
    var checked = $(this).is(':checked');
    $(this).parent().toggleClass('btn-primary',checked);
    $(this).parent().toggleClass('btn-default',!checked);    
});

This will change the classes completely. You dont need to remove the btn class.

$('input').change(function () {           
    var checked = $(this).is(':checked');
    $(this).parent().toggleClass('btn-primary',checked);
    $(this).parent().toggleClass('btn-default',!checked);    
});
.btn-primary{
    background-color: red;
}

.btn-default{
    background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
     <label for="status" class="btn btn-default">
      <input type="checkbox" name="status[]" id="status" value="1"> 
        <span class="glyphicon glyphicon-ok"></span>
     </label>
   </div>

Upvotes: 1

user2755150
user2755150

Reputation:

Could this work? Let me know to delete my answer if not

$('input').click(function () {
    $(this).parent().removeClass($(this).is(':checked') ? 'btn btn-default' : 'btn btn-primary'); 
    $(this).parent().addClass($(this).is(':checked') ? 'btn btn-primary' : 'btn btn-default'); 
});

Upvotes: 2

Barmar
Barmar

Reputation: 781004

If you want to read a property, you should only give one argument to .prop(). Giving two arguments sets the property to the second argument, it doesn't compare the property with it. So it should be:

$('input:checkbox').change(function () {
    if ($(this).prop('checked')) {
        $(this).parent().addClass('btn btn-primary');
    } else {
        $(this).parent().addClass('btn btn-default');
    }
});

You can also just use if (this.checked), which is more efficient than creating a jQuery object and calling a method on it.

Upvotes: 2

Related Questions