Solved

Javascript checkboxes selection

Posted on 2007-11-27
9
155 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 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
 

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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now