Hiding Other Rows In A Table When Checkbox Is Selected

Question

Name

Location

Industry&

Solution 1:

You can do this way. ids must be unique so change match as class name.

$(document).ready(function() {
    $('#linkedin_match .match').change(function(){ //bind change event to the checkboxes
        var $this = $(this);
        $('#linkedin_match').find('tr:gt(0)').not($this.closest('tr')).toggle();
        //since all trs are visible you can use toggle to toggle all the trs but not the one that is a parent of this.
       //And un checking will bring all of them back to visible state.
    });
});

Fiddle

if you have no control over changing the id to class or add a class, then you can target the checkbox

 $('#linkedin_match :checkbox').change(function(){...});

gt(0) - To select the rows with index greater than 0. i.e to avoid the first one.
closest('tr') - To get the parent tr of the checked element.
not($this.closest('tr')) - To add a filter. i.e to exclude the current row.
toggle() - To toggle the element's state.

Solution 2:

Add a checkbox

<input type="checkbox" class="check"> Check me

then invoke jquery toggle

$('.check').click(function(){
    $('td.hide').toggle();
});

Fiddle: http://jsfiddle.net/webbymatt/DLxjR/

P.s. in my example I have put a class on the cell I want to hide, this could also be applied to entire rows. In this case:

<td class="hide">WC Claim Manager</td>

Solution 3:

First off you shouldn't have two elements with the same id. change those to classes and you could do the following:

$(document).on('click', '.match', function(){ 


    if ($(this).is(':checked')) { 
        $('.match').closest('tr').hide();
        $(this).closest('tr').show(); 
    } else { $('.match').closest('tr').show(); }

});

This solution will show all rows with a checkbox when a box is unchecked, and only show the relevant row when the checkbox is checked.

JavaScript Square

Hiding Other Rows In A Table When Checkbox Is Selected

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Hiding Other Rows In A Table When Checkbox Is Selected"