checking all checkboxes

Discussion in 'JavaScript' started by gilgalbiblewheel, Aug 22, 2008.

0
  1. #1
    any tutorial for checking or selecting all checkboxes?
     
    gilgalbiblewheel, Aug 22, 2008 IP
  2. ghprod

    ghprod Active Member

    Messages:
    1,010
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    78
    #2
    i'm looking for this too :)

    anyone can help?
     
    ghprod, Aug 22, 2008 IP
  3. gilgalbiblewheel

    gilgalbiblewheel Well-Known Member

    Messages:
    435
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    gilgalbiblewheel, Aug 22, 2008 IP
  4. gilgalbiblewheel

    gilgalbiblewheel Well-Known Member

    Messages:
    435
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #4
    Ok that DOES work but not what I'M looking for:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<SCRIPT LANGUAGE="JavaScript">
		<!-- 	
		// by Nannette Thacker
		// http://www.shiningstar.net
		// This script checks and unchecks boxes on a form
		// Checks and unchecks unlimited number in the group...
		// Pass the Checkbox group name...
		// call buttons as so:
		// <input type=button name="CheckAll"   value="Check All"
			//onClick="checkAll(document.myform.list)">
		// <input type=button name="UnCheckAll" value="Uncheck All"
			//onClick="uncheckAll(document.myform.list)">
		// -->
		
		<!-- Begin
		function checkAll(field)
		{
		for (i = 0; i < field.length; i++)
			field[i].checked = true ;
		}
		
		function uncheckAll(field)
		{
		for (i = 0; i < field.length; i++)
			field[i].checked = false ;
		}
		//  End -->
	</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
	<form name="myform" action="checkboxes.asp" method="post">
		<b>Your Favorite Scripts & Languages</b><br>
		<input type="checkbox" name="list" value="1">Java<br>
		<input type="checkbox" name="list" value="2">Javascript<br>
		<input type="checkbox" name="list" value="3">Active Server Pages<br>
		<input type="checkbox" name="list" value="4">HTML<br>
		<input type="checkbox" name="list" value="5">SQL<br>
		
		<input type="button" name="CheckAll" value="Check All"
		onClick="checkAll(document.myform.list)">
		<input type="button" name="UnCheckAll" value="Uncheck All"
		onClick="uncheckAll(document.myform.list)">
		<br>
	</form>
</body>
</html>
    Code (markup):
    They've using two buttons to make it work. I need One checkbox instead of the two buttons. A simple check and uncheck o make it work.
     
    gilgalbiblewheel, Aug 22, 2008 IP
  5. gilgalbiblewheel

    gilgalbiblewheel Well-Known Member

    Messages:
    435
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    Well I got this far:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<SCRIPT LANGUAGE="JavaScript">
		<!-- 	
		// by Nannette Thacker
		// http://www.shiningstar.net
		// This script checks and unchecks boxes on a form
		// Checks and unchecks unlimited number in the group...
		// Pass the Checkbox group name...
		// call buttons as so:
		// <input type=button name="CheckAll"   value="Check All"
			//onClick="checkAll(document.myform.list)">
		// <input type=button name="UnCheckAll" value="Uncheck All"
			//onClick="uncheckAll(document.myform.list)">
		// -->
		
		<!-- Begin
		function checkAll(field)
		{
		for (i = 0; i < field.length; i++)
			{
			document.getElementsByName('list')[i].checked = true;
			//field[i].checked = true ;
			}
		}
		
		function uncheckAll(field)
		{
		for (i = 0; i < field.length; i++)
			{
			document.getElementsByName('list')[i].checked = false;
			//field[i].checked = false ;
			}
		}
		//  End -->
	</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Check/Uncheck All Checkboxes</title>
</head>
<body>
	<form name="myform" action="checkboxes.asp" method="post">
		<b>Your Favorite Scripts & Languages</b><br>
		<input type="checkbox" name="list" value="1">Java<br>
		<input type="checkbox" name="list" value="2">Javascript<br>
		<input type="checkbox" name="list" value="3">Active Server Pages<br>
		<input type="checkbox" name="list" value="4">HTML<br>
		<input type="checkbox" name="list" value="5">SQL<br>
		
		<input type="checkbox" name="CheckAll" value="Check All"
		onClick="if(this.checked = 'false'){document.getElementById('write').value='hi'; checkAll(document.myform.list);} else{document.getElementById('write').value='bye';uncheckAll(document.myform.list);}" />
		<input type="text" id="write" value="" />
		<br>
	</form>
</body>
</html>
    Code (markup):
    Still there's something wrong with the if statements.
     
    gilgalbiblewheel, Aug 22, 2008 IP
  6. gilgalbiblewheel

    gilgalbiblewheel Well-Known Member

    Messages:
    435
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #6
    Bingo!
    Here's the solution:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Check/Uncheck All Checkboxes</title>
		<SCRIPT LANGUAGE="JavaScript">
			function checkAll(field)
			{
			for (i = 0; i < field.length; i++)
				{
				document.getElementsByName('list')[i].checked = true;
				//field[i].checked = true ;
				}
			}
			
			function uncheckAll(field)
			{
			for (i = 0; i < field.length; i++)
				{
				document.getElementsByName('list')[i].checked = false;
				//field[i].checked = false ;
				}
			}
		</script>
	</head>
	<body onLoad="uncheckAll(document.myform.list); document.getElementById('check_uncheck_all').checked = false;">
		<form name="myform" action="checkboxes.asp" method="post">
			<b>Your Favorite Scripts & Languages</b><br>
			<input type="checkbox" name="list" value="1">Java<br>
			<input type="checkbox" name="list" value="2">Javascript<br>
			<input type="checkbox" name="list" value="3">Active Server Pages<br>
			<input type="checkbox" name="list" value="4">HTML<br>
			<input type="checkbox" name="list" value="5">SQL<br>
			
			<input type="checkbox" id="check_uncheck_all" name="CheckAll" value="Check All"
			onClick="if(this.checked == true){document.getElementById('write').value='hi'; checkAll(document.myform.list);} else{document.getElementById('write').value='bye'; uncheckAll(document.myform.list);}" />
			<input type="text" id="write" value="" />
			<br>
		</form>
	</body>
</html>
    Code (markup):
    You might not need the textbox.
     
    gilgalbiblewheel, Aug 22, 2008 IP
  7. gilgalbiblewheel

    gilgalbiblewheel Well-Known Member

    Messages:
    435
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #7
    Even better. I replaced document.myform.list by document.getElementsByName(). It's an old code.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Check/Uncheck All Checkboxes</title>
			<script language="JavaScript">
				function checkAll(field)
				{
				for (i = 0; i < field.length; i++)
					{
					document.getElementsByName('list')[i].checked = true;
					//field[i].checked = true ;
					}
				}
				
				function uncheckAll(field)
				{
				for (i = 0; i < field.length; i++)
					{
					document.getElementsByName('list')[i].checked = false;
					//field[i].checked = false ;
					}
				}
			</script>
	</head>
	<body onLoad="uncheckAll(document.myform.list); document.getElementById('check_uncheck_all').checked = false;">
		<form name="myform" action="checkboxes.asp" method="post">
			<b>Your Favorite Scripts & Languages</b><br>
			<input type="checkbox" name="list" value="1">Java<br>
			<input type="checkbox" name="list" value="2">Javascript<br>
			<input type="checkbox" name="list" value="3">Active Server Pages<br>
			<input type="checkbox" name="list" value="4">HTML<br>
			<input type="checkbox" name="list" value="5">SQL<br>
			
			<input type="checkbox" id="check_uncheck_all" name="CheckAll" value="Check All"
			onClick="if(this.checked == true){document.getElementById('write').value='hi'; checkAll(document.getElementsByName('list'));} else{document.getElementById('write').value='bye'; uncheckAll(document.getElementsByName('list'));}" />
			<input type="text" id="write" value="" />
			<br>
		</form>
	</body>
</html>
    Code (markup):
     
    gilgalbiblewheel, Aug 22, 2008 IP
  8. ghprod

    ghprod Active Member

    Messages:
    1,010
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    78
    #8
    @gilgalbiblewheel

    Thnx for ur hard work :D
     
    ghprod, Aug 23, 2008 IP
  9. gilgalbiblewheel

    gilgalbiblewheel Well-Known Member

    Messages:
    435
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #9
    Without any help from others! Sometimes if you spend time on www.w3schools.com and some code examples you notice that you'll find the solution.
     
    gilgalbiblewheel, Aug 23, 2008 IP
  10. ghprod

    ghprod Active Member

    Messages:
    1,010
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    78
    #10
    Now its work prefectly :D

    Thnx
     
    ghprod, Aug 24, 2008 IP