Reputation: 43
<table id="linkedin_match">
<tr>
<th>Name</th>
<th>Location</th>
<th>Industry</th>
<th>Company</th>
<th>Position</th>
<th> </th>
<th> </th>
</tr>
<tr>
<td>Moses Gonzales</td>
<td>Greater Seattle Area</td>
<td>Chemicals</td>
<td>Superior Grocers</td>
<td>WC Claim Manager</td>
<td><a href="#">Invite</a></td>
<td><input type="checkbox" id="match"/></td>
</tr>
<tr>
<td>Moses Gonzales</td>
<td>Greater Seattle Area</td>
<td>Chemicals</td>
<td>Superior Grocers</td>
<td>WC Claim Manager</td>
<td><a href="#">Invite</a></td>
<td><input type="checkbox" id="match"/></td>
</tr>
</table>
With the table above, how would I perform the logic, such that if the checkbox is selected, the other rows will hide? The rows are not limited to just two. It could be five, it could be ten, it can be just one. Currently my code is :
$('document').ready(function() {
var tr = $('#linkedin_match tr');
});
Now I don't know what to do with the tr. I'm kinda new to JS too. Thanks.
Upvotes: 1
Views: 1002
Reputation: 123739
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.
});
});
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(){...});
Upvotes: 1
Reputation: 7014
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.
Upvotes: 1
Reputation: 4381
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>
Upvotes: 1