Change checkbox icon class onclick in jQuery

Question

I have some checkboxes that come from my database wich look like this:

<input type="checkbox" class="hidden chkbox" id="single_checkbox_<?php echo $page->ID; ?>"    name="pages[]" value="<?php echo $page->ID; ?>"/>
<label rel="tooltip" data-original-title="Selecteer" class="btn" for="single_checkbox_<?php echo $page->ID; ?>"><i class="icon-check-empty"></i> Selecteer</label>

Now the checkboxes are hidden because i want the label class to act as the checkboxes.

it is in fact working but the problem is that is want to change <i class="icon-check-empty"></i> after the checkbox is clicked to <i class="icon-check"></i> and back to icon-check-empty after unchecked.

The jquery i have so far is

$('.chkbox').click(function(){

        if($(this).is(':checked')){
            $('i.icon-check-empty').replaceWith('<i class="icon-check"></i>');

        }else{

            $('i.icon-check').replaceWith('<i class="icon-check-empty"></i>');

        }

    });

It does change however it changes all the checkboxes and that isn't what i'm looking for.

If anybody has an idea on how to help me that would be great.

Kind regards.

Answer 1

you can do this by

$("selector ").attr('class', 'newClass'); //set class (regardless of what it was)

or by

 $("selector ").addClass('newClass'); //add a class
 $("selector ").removeClass("second"); //remove class

list of jQuery methods specifically for the class attribute.

---

try

$('.chkbox').click(function () {
    var $this = $(this);
    if ($this.is(':checked')) {
        $this.next().find('i.icon-check-empty').replaceWith('<i class="icon-check"></i>');
    } else {
        $this.next().find('i.icon-check').replaceWith('<i class="icon-check-empty"></i>');
    }
});

and better approach is using toogle

$('.chkbox').click(function(){
     var $ico = $(this).next().find('i');
     $ico.toggleClass('icon-check icon-check-empty');
});

Answer 2

jsBin demo

$('.chkbox').click(function(){
     var $ico = $(this).next('label').find('i');
     $ico.toggleClass('icon-check icon-check-empty');
});

Or like:

jsBin demo

function checkTest( chkbx ) {

    var $ico     = $(chkbx).next('label').find('i'),
        icoClass = ['icon-check', 'icon-check-empty'],
        io       = $(chkbx).is(':checked') ? 0 : 1 ;

    $ico.removeClass().addClass( icoClass[io] );

}


$('.chkbox').each(function(){
    checkTest( this );  // Test all on page load
}).click(function(){
    checkTest( this );  // Test on click
});

Answer 3

Try

$('.chkbox').click(function(){
     var $this = $(this);
     if($this.is(':checked')){
         $this.next().find('i.icon-check-empty').replaceWith('<i class="icon-check"></i>');    
     } else {
         $this.next().find('i.icon-check').replaceWith('<i class="icon-check-empty"></i>');
     }
 });

Or better simply toggle class

$('.chkbox').click(function () {
    var $this = $(this),
        isChecked = $this.is(':checked');
    $this.next().find('i')
        .toggleClass('icon-check-empty', !isChecked)
        .toggleClass('icon-check', isChecked);

});

Answer 4

also look at .addClass() , .removeClass() , .toggleClass()

Answer 5

You can try this :

$('.chkbox').click(function(){

        if($(this).is(':checked')){
            $(this).next().find('i.icon-check-empty')attr("class",icon-check);

        }else{

            $(this).next().find('i.icon-check').attr("class",icon-check-empty);

        }

    });

Answer 6

you can do:

$('.chkbox').click(function(){
    var i = $(this).next().find("i");

    if($(this).is(':checked')) {
        i.removeClass("icon-check-empty");
        i.addClass("icon-check");
    }
    else {
        i.removeClass("icon-check");
        i.addClass("icon-check-empty");
    }
});