Solved

Javascript checkboxes selection

Posted on 2007-11-27
9
160 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

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 demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

627 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