Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Javascript checkboxes selection

Posted on 2007-11-27
9
Medium Priority
?
165 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
  • 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
Industry Leaders: 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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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

783 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