Jquery Toggle Checkbox

问题:

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?

回答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

回答2:

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

回答3:

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

文章来源: Jquery Toggle Checkbox