Hide and show functionality

JavaScript
,
1

I am using check/uncheck jquery functionality in my project, its working fine but I need to add 1 more functionality in this table that if I click button i.e. “View Selected” then

(1) it should show only checked rows in the table
(2) and hide uncheck rows,

I tried something but not works…

here is my working…

<!DOCTYPE html>
<html lang="en">
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
<STYLE>body,input{font-family:Calibri,Arial;margin:0px}h1{margin:0 0 0 20px}html,body,#container{height:100%}body>#container{height:auto;min-height:100%}#header{height:50px;background-color:#ddd;border-bottom:1px solid #aaa;width:100%}#footer{font-size:12px;clear:both;position:relative;z-index:10;height:3em;margin-top:-3em;text-align:center}table{width:300px;border:1px solid;border-collapse:collapse;margin:0 0 0 20px;}th{background-color:#3e6db0;color:#fff;padding:5px}</STYLE>
</HEAD>
<BODY>

<table border="1">
<tr>
	<th><input type="checkbox" id="selectall"/></th>
	<th>Cell phone</th>
	<th>Rating</th>
</tr>
<tr>
	<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
	<td>BlackBerry Bold 9650</td>
	<td>2/5</td>
</tr>
<tr>
	<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
	<td>Samsung Galaxy</td>
	<td>3.5/5</td>
</tr>
<tr>
	<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
	<td>Droid X</td>
	<td>4.5/5</td>
</tr>
<tr>
	<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
	<td>HTC Desire</td>
	<td>3/5</td>
</tr>
<tr>
	<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
	<td>Apple iPhone 4</td>
	<td>5/5</td>
</tr>

<tr>
	<td align="center" colspan="3"><button type="button" id="viewSelected">View Selected </button></td>
</tr>
</table>

</BODY>
<SCRIPT>
		$(function(){
			$('#selectall').click(function(){
				$('.case').attr('checked', this.checked);	// checks all inputs or unchecks all inputs depending if true or false
			});
			$('.case').click(function(){
				if($('.case').length==$('.case:checked').length){
					$('#selectall').attr('checked','checked'); // if all inputs are checked then switch on the #selectall input also
				}else{
					$('#selectall').removeAttr('checked'); // else switch off the #selectall input
				}
			});
		});	
</SCRIPT>
</HTML>
2

Try this:

$(function(){
	$('#selectall').click(function(){
		$('.case').closest('tr').show();
                $('#viewSelected').text('View Selected');
		$('.case').attr('checked', this.checked);	// checks all inputs or unchecks all inputs depending if true or false
	});
	$('.case').click(function(){
		if($('.case').length==$('.case:checked').length){
			$('#selectall').attr('checked','checked'); // if all inputs are checked then switch on the #selectall input also
		}else{
			$('#selectall').removeAttr('checked'); // else switch off the #selectall input
		}
	});
	
	$('#viewSelected').click(function(){
		$('.case').not(':checked').closest('tr').toggle();
		var $el = $(this);
		$el.text($el.text() == "View Selected" ? "View All": "View Selected"); 
	});
});
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.