• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 172
  • Last Modified:

Javascript checkboxes selection

Hi,

I have a page with several checkboxes. I need to do the following two things:

1. Add a drop down with options: select all, select none and select based on a hidden value
2. Have two links that can be activated/clicked only when at least one checkbox is selected.

Thank you for your time,
John
0
infodigger
Asked:
infodigger
  • 3
  • 3
  • 3
2 Solutions
 
Sinoj SebastianCTO & OpenERP Project managerCommented:
check this out.
<!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" xml:lang="en" lang="en">
<head>
	<script type="text/javascript"> 
		var hiddenValues = [1, 0, 1, 0, 1, 0, 1, 0]
		
		function markIt(what){
			for (i = 1; i< 9; i++) {
				if(what == "auto"){
					document.getElementById("ch"+i).checked = hiddenValues[i-1];
				}
				else 
				{
					if(what == "all"){
						document.getElementById("ch"+i).checked = true;
					}
					else
					{
						document.getElementById("ch"+i).checked = false;
					}	
				}
			} 
		}		
		function checkIt() {
			for (i = 1; i< 9; i++) {
				if (document.getElementById("ch"+i).checked){
					return true;
				}
			} 
			return false;
		}
		
	</script>
</head>
<body onload="markIt('auto')">
	<input type="checkbox" id="ch1" > check box 1<br/>
	<input type="checkbox" id="ch2" > check box 1<br/>
	<input type="checkbox" id="ch3" > check box 1<br/>
	<input type="checkbox" id="ch4" > check box 1<br/>
	<input type="checkbox" id="ch5" > check box 1<br/>
	<input type="checkbox" id="ch6" > check box 1<br/>
	<input type="checkbox" id="ch7" > check box 1<br/>
	<input type="checkbox" id="ch8" > check box 1<br/>
 
	<select onChange="markIt(this.value)" >
	  <option value="auto" selected>select based on a hidden value</option>
	  <option value="all" >select all</option>
	  <option value="none">select none</option>
	</select><br/>
	<a href="http://www.google.com" onclick="return checkIt();">Google</a><br/>
	<a href="http://www.yahoo.com" onclick="return checkIt();">Yahoo</a>
 
</body>
</html>

Open in new window

0
 
Göran AnderssonCommented:
First you need a way to index the checkboxes, for example giving them the id chk1 trhough chk47 so that you can easily access them.

Add Javascript functions to select specific boxes:

function setChecked(int index, bool checked) {
   document.getElementById('chk' + index).checked = checked;
}

function setCheckedAll(bool checked) {
   for (var i=1; i<=47; i++) setChecked(i, checked);
}

function setCheckedOne(int index) {
   for (var i=1; i<=47; i++) setChecked(i, i == index);
}

Add a function to enable/disable the links:

function enableLinks() {
   var disabled = true;
   for (var i=1; i<=47; i++) disabled &= !document.getElementById('chk' + i).checked;
   document.getElementById('IdOfTheFirstLink').disabled = disabled;
   document.getElementById('IdOfTheSecondLink').disabled = disabled;
}

Add a function to handle the dropdown:

function setCheckedOption(sel) {
   switch (sel.selectedIndex) {
      case 0: setCheckedAll(true); break;
      case 1: setCheckedAll(false); break;
      case 2: setCheckedOne(documet.getElementById('IdOfHiddenField').value);
   }
   enableLinks();
}

Add an event to the dropdown:

onchange="setCheckedOption(this);"

Add an event to every checkbox:

onclick="enableLinks();"

Disable the links from start, or call enableLinks() after you have initially populated the checkboxes.

Disclaimer: The code is not tested, and may contain minor errors.
0
 
Sinoj SebastianCTO & OpenERP Project managerCommented:
GreenGhost,
  What is wrong with my post? and yes it is tested too.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
infodiggerAuthor Commented:
Thank you very much for your answers.

I have already implemented the code that sinoj provided and it works except for the part that I want to totally disable the links (actually make them not appear as links, maybe with a style change). So I believe it's fair to give sinoj most of the point.

Thanks,
John
0
 
Göran AnderssonCommented:
sinoj, the only thing wrong with your post is that it did not exist when I read the question.
0
 
infodiggerAuthor Commented:
Is there a way to change the style when the link is disabled?

Thanks,
John
0
 
Göran AnderssonCommented:
You can do anything with the style, like changing the color to red for disabled and white for enabled:

document.getElementById('IdOfTheFirstLink').disabled = disabled;
document.getElementById('IdOfTheFirstLink').style.color = disabled ? '#f00' : '#fff';
0
 
infodiggerAuthor Commented:
Thanks:)
0
 
Sinoj SebastianCTO & OpenERP Project managerCommented:
hmm... This time I am late :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 3
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now