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.

Mayank K. Swami · Accepted Answer · 2012-12-20 13:49:30Z

4

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

edited Dec 20, 2012 at 13:49

answered Dec 20, 2012 at 13:34

Mayank K. Swami

57.3k23 gold badges130 silver badges148 bronze badges

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

1 Comment

Jarno van Rhijn Over a year ago

Thanks for your quick reply, i've tried it however this still changes all my icon classes. i just want the one that is checked to be changed.

Roko C. Buljan · Accepted Answer · 2012-12-20 14:23:54Z

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

edited Dec 20, 2012 at 14:23

answered Dec 20, 2012 at 13:43

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

4 Comments

karim79 Over a year ago

+1 - this is the way to do it. I just finished making a fiddle with what is essentially this. :)

Jarno van Rhijn Over a year ago

Thanks, works perfectly.. it has been driving me crazy, after a while i am just trying the most weird sollutions haha. it was in fact very easy. thanks a million :D

Roko C. Buljan Over a year ago

@JarnovanRhijn added a demo where you don't need to assign classes to your icons in HTML and you can have already selected ones by just adding checked="checked" to the desired input

Jarno van Rhijn Over a year ago

@roXon Thanks man.. getting better by the minute :) will implement this as the demo provides.. Again Thanks :D

Mayank K. Swami · Accepted Answer · 2012-12-20 13:45:06Z

2

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

});

edited Dec 20, 2012 at 13:45

Mayank K. Swami

57.3k23 gold badges130 silver badges148 bronze badges

answered Dec 20, 2012 at 13:37

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Comments

Mahmoud Farahat · Accepted Answer · 2012-12-20 13:38:02Z

1

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

answered Dec 20, 2012 at 13:38

Mahmoud Farahat

5,4814 gold badges46 silver badges63 bronze badges

Comments

Surinder ツ · Accepted Answer · 2012-12-20 13:39:28Z

1

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

        }

    });

answered Dec 20, 2012 at 13:39

Surinder ツ

1,7883 gold badges17 silver badges27 bronze badges

Comments

lante · Accepted Answer · 2012-12-20 13:41:12Z

1

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

answered Dec 20, 2012 at 13:41

lante

7,3924 gold badges39 silver badges59 bronze badges

Comments

Doink · Accepted Answer · 2012-12-20 13:42:25Z

1

Try something like this

HTML

<input type="checkbox" class="chkbox" id="chkbox"  name="chkbox" value="value"/>

JQuery

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

    console.log('click');

    if($(this).is(':checked')){
        console.log('checked');
        $("#id").addClass('icon-check');
        $("#id").removeClass('icon-check-empty');
    }
    else{
        console.log('unchecked');
        $("#id").addClass('icon-check-empty');
        $("#id").removeClass('icon-check');
    }

});

answered Dec 20, 2012 at 13:42

Doink

1,1506 silver badges10 bronze badges

Comments

zer0bit · Accepted Answer · 2012-12-20 13:43:01Z

1

you can use removeClass and addClass to do what you want

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

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

        }

    });

answered Dec 20, 2012 at 13:43

zer0bit

6155 silver badges14 bronze badges

Collectives™ on Stack Overflow

Change checkbox icon class onclick in jQuery

8 Answers 8

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related