5

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?

4

3 に答える 3

1

試着changeイベント。また、toggleイベントは非推奨でありaddClass、2 番目のパラメーターを使用しないと思います (jQuery UI を使用している場合を除く)。

$('input[type=checkbox]').change(function() {
  $(this).parents('tr').toggleClass('selectCheckBox', $(this).is(':checked'));
});
于 2012-12-19T00:54:05.607 に答える
1

これをもう少し最適化する方法があるかもしれません:

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

ジャスフィドル

于 2012-12-19T00:56:14.553 に答える
0

私はそれを考え出した。必要な効果を得るには、残りの jQuery UI パラメーターと一緒に toggleClass を使用する必要がありました。

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

// Here are the parameteres below
    .toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
于 2012-12-19T01:34:31.927 に答える