Jquery Toggle Checkbox

Question

So I have an issue. I'm trying to toggle checkboxes in order to add some css to the parent <tr>

This is what I have so far

 $('input[type=checkbox]').toggle(function(){

    $(this).parents('tr').addClass('selectCheckBox', 970);
},
function(){

    $(this).parents('tr').removeClass('selectCheckBox', 970);
});

However, the result of this is that the <tr> does receieve the selectCheckBox but the checkbox does not become checked. So I tried the following:

 $('input[type=checkbox]').toggle(function(){
    $(this).attr('checked',true);
    $(this).parents('tr').addClass('selectCheckBox', 970);
},
function(){
    $(this).attr('checked',false);
    $(this).parents('tr').removeClass('selectCheckBox', 970);
});

Once again, no luck.

I believe it has to do with how the checkbox id looks.

<input type="checkbox" name="select[]" id="select[]">

I then tried escaping the [] by using \\[\\] as I've used in the past, but no luck.

Is there a way to make the checkbox checked?

see here stackoverflow.com/questions/4177159/toggle-checkboxes-on-off — Mem Maina
– Mem Maina, Commented Feb 22, 2014 at 7:48

elclanrs · Accepted Answer · 2012-12-19 01:02:44Z

3

Try on change event. Also as I think toggle event is deprecated and addClass doesn't take a second parameter (unless you're using jQuery UI).

$('input[type=checkbox]').change(function() {
  $(this).parents('tr').toggleClass('selectCheckBox', $(this).is(':checked'));
});

edited Dec 19, 2012 at 1:02

answered Dec 19, 2012 at 0:54

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

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

1 Comment

Dimitri Over a year ago

Awesome!! This worked perfectly. I thought of the change event, but didn't think it'd work! THe addClass has the second parameter to ease in the effect of the class. it fades it in.

Syon · Accepted Answer · 2012-12-19 00:56:14Z

1

There may be a way to optimize this a bit more:

$('input[type=checkbox]').on('click', function() {
    var $this = $(this);
    if ($this.is(':checked')) {
        $this.closest('tr').addClass('selectCheckbox');
    } else {
        $this.closest('tr').removeClass('selectCheckbox');
    }
});

JsFiddle

answered Dec 19, 2012 at 0:56

Syon

1,61413 silver badges16 bronze badges

Comments

Dimitri · Accepted Answer · 2012-12-19 01:34:31Z

0

I figured it out. I needed to use toggleClass along with the rest of jQuery UI parameters to get the effect needed.

$('input[type=checkbox]').click(function(){
    $(this).parents('tr').toggleClass('selectCheckBox',  1000, "easeOutSine" );
});

// Here are the parameteres below
    .toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

answered Dec 19, 2012 at 1:34

Dimitri

1,9763 gold badges26 silver badges50 bronze badges

Collectives™ on Stack Overflow

Jquery Toggle Checkbox

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related