Selecting CheckBoxes via a text link ?!?

[Markh51]

Hi,

How do I go about select a "unknown" number of checkboxes ?

What I mean by unknown is that the number of checkboxes get determined from the amount of records which are returned from the database. The checkboxes all have the same name but their value is "Dynamicaly" created.

I need a script which will select from 1 box to however many records are returned. The script also has to be able to clear the boxes via the same link.

i.e: Say I have 20 boxes all named "myData", if I was to click on the link "ALL", then all the boxes would get selected. If I was to click the link again, then all the boxes would be cleared. If only SOME of the boxes are selected then the link should CLEAR all the boxes.

If someone could write me a quick script which would enable me to do this, then that would be great, as I am not a great JS programmer.

Thanks alot in advance.

 

[ggriffit]

You can loop through the elements of the form and then check if the element type is CHECKBOX and that the element name is myData.

 

[mit99mh]

Something like this should do it

function selectAllCheckBoxes(){
var frm = document.form;
for( var i = 0; i < frm.length; i++ ){
var e = frm.elements;
if((e.type == 'checkbox') && (e.checked == false)){
e.checked = true;
}
}
}


function deselectAllCheckBoxes(){
var frm = document.form;
for( var i = 0; i < frm.length; i++ ){
var e = frm.elements;
if((e.type == 'checkbox') && (e.checked == true)){
e.checked = false;
}
}
}

<a href=&quot;javascript:deselectAllCheckBoxes();&quot;><img src=&quot;images/button_deselectall.gif&quot; width=83 height=21 alt=&quot;Deselect All&quot; border=&quot;0&quot; hspace=&quot;5&quot;></a>

<a href=&quot;javascript:selectAllCheckBoxes();&quot;><img src=&quot;images/button_selectall.gif&quot; width=83 height=21 alt=&quot;Select All&quot; border=&quot;0&quot; hspace=&quot;5&quot;></a>

 

[theboyhope]

You don't really have to loop through the entire

form.elements

array just to work with your checkboxes. If they're all called 'myData' (as you said in your post) you could use:

document.getElementsByName( "myData" );

instead.

Then one function would test to see if any boxes are checked, another checks/unchecks them depending on the results of that test.

<script>

function selectDeselect() {

	var boxes = document.getElementsByName( &quot;myData&quot; );
	var boxes_checked = anyChecked();


	if( !boxes_checked )
		setChecks( true );
	else
		setChecks( false );



	function setChecks( setting ) {

		for( var i=0; i < boxes.length; i++ ) {

			boxes[ i ].checked = setting;
		}
	}


	function anyChecked() {

		for( var i=0; i < boxes.length; i++ ) {

			if( boxes[ i ].checked == true ) {

				return true;

			} 
		}

		return false;
	}

}

</script>

	



	



<form>

<input type=&quot;checkbox&quot; name=&quot;myData&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData&quot; />

</form>

<a onclick=&quot;selectDeselect( 'myData' );&quot;>Select/Deselect</a>

 

[theboyhope]

Addition: there should be a

break;

statement after

return true;

in the function

anyChecked()

.

 

[mit99mh]

you are correct - I did a full loop through the form as the poster said they weren't the best jscript guy in the world so I kept it simple losing the helper functions.

 

[Markh51]

Thanks guys it worked like a dream, much better than the old script I had.

Thanks alot for your help.

Regards.

 

[theboyhope]

What am I talking about, eh? Of course there shouldn't be a

break;

statement in there.

Sheesh.

 

[Vem786]

Hi All;
What If I have 7 checkboxes with &quot;name&quot; property being different. For Example myData1, myData2,myData3..so on till myData7. And I want to accomplish the same objective like selecting All or Deselecting All with a single click??

Thanks in Advance.

 

[ggriffit]

You just do the same loop, but change the code where it tests each checkbox and then you cna see if your constant string is in the name attribute of the element.

something like the following should get you started, although it is not optimised for performance, simply for simple understandability based ont eh above postings :

<html>
<head>
<script language=&quot;javascript&quot;>
function checkAll()
{
var theForm=document.myForm; // short hand reference to the form
var theField; // shorthand reference to each field
var fieldName; // shorthand reference to the fields name attribute

for (i=0;i<theForm.elements.length;i++)
{
// assign the current field
theField=theForm.elements;

// if a checkbox
if (theField.type==&quot;checkbox&quot
{
// convert the field name to a string
fieldName=theField.name.toString();

// if has the right name using indexOf to look through the entire string
// if we expect it to be the first n chars or similar we could use substring
// if there is no match then the indexOf value is -1
if (fieldName.indexOf(&quot;myData&quot>-1)
{
theField.checked=true;
}
}
}
}
</script>
</head>
<body>
<form name=&quot;myForm&quot;>
<input type=&quot;checkbox&quot; name=&quot;myData1&quot;>myData1<br>
<input type=&quot;checkbox&quot; name=&quot;myData2&quot;>myData2<br>
<input type=&quot;checkbox&quot; name=&quot;myData3&quot;>myData3<br>
<input type=&quot;checkbox&quot; name=&quot;myData4&quot;>myData4<br>
<input type=&quot;checkbox&quot; name=&quot;myData5&quot;>myData5<br>
<input type=&quot;checkbox&quot; name=&quot;myData6&quot;>myData6<br>
<input type=&quot;checkbox&quot; name=&quot;another&quot;>another<br>
<input type=&quot;button&quot; onclick=&quot;checkAll()&quot; value=&quot;Check all myData&quot;>
</form>
</body>
</html>

 

[Vem786]

Hi:
I'm trying to use the code below to Check All checkboxes, If they aren't checked and Uncheck All If they are Checked. But somehow I dont get to see the Action!!!!

Can Anyone please point out whats wrong?

-------------------------------------
<HTML
<HEAD>
<TITLE> SELECT/UNSELECT CHECKBOXES</TITLE>
<script language=&quot;javascript&quot;>
function selectDeselect() {
var len = document.form1.elements.length;
for(var i=0;i<len;i++)
{
alert(&quot;In FIRSt IF&quot;
var boxes = document.form1.myData;
}
var boxes_checked = anyChecked();

if(boxes_checked==false)
setChecks(true);
else
setChecks( false);



function setChecks( setting ) {

for( var i=0; i < len; i++ ) {

boxes[ i ].checked = setting;
}
}


function anyChecked() {

for( var i=0; i < len; i++ ) {

if( boxes[ i ].checked == true ) {

return true;
}
}

return false;
}
}


</script>
</HEAD>
<BODY>
<form name=&quot;form1&quot;>
<input type=&quot;checkbox&quot; name=&quot;myData1&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData2&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData3&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData4&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData5&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData6&quot; />
<input type=&quot;checkbox&quot; name=&quot;myData7&quot; />
</form>
<a href='#' onClick=&quot;selectDeselect();&quot;>Select/Deselect</a>

</body>
</html>

 

[ggriffit]

Try the following :

<html>
<head>
<script language=&quot;javascript&quot;>
function checkAll()
{
var theForm=document.myForm; // short hand reference to the form
var theField; // shorthand reference to each field
var fieldName; // shorthand reference to the fields name attribute

for (i=0;i<theForm.elements.length;i++)
{
// assign the current field
theField=theForm.elements;

// if a checkbox
if (theField.type==&quot;checkbox&quot
{
if (theField.checked)
{
theField.checked=false;
}
else
{
theField.checked=true;
}
}
}
}
</script>
</head>
<body>
<form name=&quot;myForm&quot;>
<input type=&quot;checkbox&quot; name=&quot;myData1&quot;>myData1<br>
<input type=&quot;checkbox&quot; name=&quot;myData2&quot;>myData2<br>
<input type=&quot;checkbox&quot; name=&quot;myData3&quot;>myData3<br>
<input type=&quot;checkbox&quot; name=&quot;myData4&quot;>myData4<br>
<input type=&quot;checkbox&quot; name=&quot;myData5&quot;>myData5<br>
<input type=&quot;checkbox&quot; name=&quot;myData6&quot;>myData6<br>
<input type=&quot;checkbox&quot; name=&quot;another&quot;>another<br>
<input type=&quot;button&quot; onclick=&quot;checkAll()&quot; value=&quot;Check all&quot;>
</form>
</body>
</html>