?
Solved

Javascript checkboxes selection

Posted on 2007-11-27
9
Medium Priority
?
162 Views
Last Modified: 2010-04-21
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
Comment
Question by:infodigger
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
9 Comments
 
LVL 12

Accepted Solution

by:
Sinoj Sebastian earned 1600 total points
ID: 20360005
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
 
LVL 29

Assisted Solution

by:Göran Andersson
Göran Andersson earned 400 total points
ID: 20360032
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
 
LVL 12

Expert Comment

by:Sinoj Sebastian
ID: 20360077
GreenGhost,
  What is wrong with my post? and yes it is tested too.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Closing Comment

by:infodigger
ID: 31411247
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
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20360181
sinoj, the only thing wrong with your post is that it did not exist when I read the question.
0
 

Author Comment

by:infodigger
ID: 20360308
Is there a way to change the style when the link is disabled?

Thanks,
John
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20360398
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
 

Author Comment

by:infodigger
ID: 20360426
Thanks:)
0
 
LVL 12

Expert Comment

by:Sinoj Sebastian
ID: 20360664
hmm... This time I am late :)
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question