Solved

Javascript checkboxes selection

Posted on 2007-11-27
9
158 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 400 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 100 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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

697 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