Page 1 of 1

Combine functions when clicked [SOLVED]

Posted: Sat May 06, 2006 8:46 am
by s.dot

Code: Select all

<input class="submit" type="button" value="Check All" onClick="SetAllCheckBoxes('commentList', 'cid[]', true);"> 
<input class="submit" type="button" value="Uncheck All" onClick="SetAllCheckBoxes('commentList', 'cid[]', false);">
Is there any way I can combine this into one button, so when its clicked it checks all the boxes, and when its clicked again, it unchecks all the boxes.

I've seen it done before but not sure how to go about it.

Here's the function I'm using:

Code: Select all

function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
	if(!document.forms[FormName])
		return;
	var objCheckBoxes = document.forms[FormName].elements[FieldName];
	if(!objCheckBoxes)
		return;
	var countCheckBoxes = objCheckBoxes.length;
	if(!countCheckBoxes)
		objCheckBoxes.checked = CheckValue;
	else
		// set the check value for all check boxes
		for(var i = 0; i < countCheckBoxes; i++)
			objCheckBoxes[i].checked = CheckValue;
}

Posted: Sat May 06, 2006 9:00 am
by feyd
totally untested

Code: Select all

function SetAllCheckBoxes(Button, FormName, FieldName)
{
  if(!document.forms[FormName] or !document.forms[FormName].elements[FieldName])
  {
    return;
  }

  var boxes = document.forms[FormName].elements[FieldName];
  var state = !Button.value.match(/uncheck/i);
  Button.value = (state ? 'Check all' : 'Uncheck All');
  var len = boxes.length;
  if(!len)
  {
    boxes.checked = state;
  }
  else
  {
    for(var j =0; j < len; ++j)
    {
      boxes[j].checked = state;
    }
  }
}

Posted: Sat May 06, 2006 9:32 am
by s.dot
Let's see

Your Function

Code: Select all

function SetAllCheckBoxes2(Button, FormName, FieldName) 
{ 
  if(!document.forms[FormName] or !document.forms[FormName].elements[FieldName]) 
  { 
    return; 
  } 

  var boxes = document.forms[FormName].elements[FieldName]; 
  var state = !Button.value.match(/uncheck/i); 
  Button.value = (state ? 'Check All' : 'Uncheck All'); 
  var len = boxes.length; 
  if(!len) 
  { 
    boxes.checked = state; 
  } 
  else 
  { 
    for(var j =0; j < len; ++j) 
    { 
      boxes[j].checked = state; 
    } 
  } 
}
How I'm calling it:

Code: Select all

<input class="submit" name="button" type="button" value="Check All" onClick="SetAllCheckBoxes2('button', 'commentList', 'cid[]');">
I think I'm making the call to it correctly, but my javascript knowledge is scarce.

Code: Select all

Line: 269
Char: 1
Error: Object Expected
Code: 0

Posted: Sat May 06, 2006 9:36 am
by feyd
switch the "or" in the first if to "||" (two pipes) and change your "'button'" to "this"

Posted: Sat May 06, 2006 9:43 am
by s.dot
That gave me the error

Code: Select all

'value' is null or not an object
I tried changing one of the lines to this

Code: Select all

var state = !document.forms[FormName].elements[Button].value.match(/uncheck/i);
and this would check all the boxes, but not uncheck them. so I changed it back.


revised function:

Code: Select all

function SetAllCheckBoxes2(Button, FormName, FieldName) 
{ 
  if(!document.forms[FormName] || !document.forms[FormName].elements[FieldName]) 
  { 
    return; 
  } 

  var boxes = document.forms[FormName].elements[FieldName]; 
  var state = !Button.value.match(/uncheck/i); 
  Button.value = (state ? 'Check All' : 'Uncheck All'); 
  var len = boxes.length; 
  if(!len) 
  { 
    boxes.checked = state; 
  } 
  else 
  { 
    for(var j =0; j < len; ++j) 
    { 
      boxes[j].checked = state; 
    } 
  } 
}
revised html call

Code: Select all

<input class="submit" type="button" value="Check All" onClick="SetAllCheckBoxes2('this', 'commentList', 'cid[]');">

Posted: Sat May 06, 2006 9:47 am
by feyd
remove the quotes around "this."

Posted: Sat May 06, 2006 9:49 am
by s.dot
heh i was actually ahead of you on that one ;)
I just tried it. It does set the checkboxes, but doesn't do anything when clicked to unset them.

This would be a handy code snippet when we're finished. you can take all the credit :P

Posted: Sat May 06, 2006 11:08 am
by n00b Saibot

Posted: Sat May 06, 2006 11:44 am
by s.dot
Bah, I'm just having a crapload of trouble.

I tried your post noob sailbot, but I needed an element name, so i tried modifying it but it didn't work :P

Code: Select all

function doCheck(state,FormName,FieldName) 
{
	var F = document.forms[FormName].elements[FieldName];
	var len = F.length;
 		for(i=0; i<len; i++) 
  			if(F.type == "checkbox") 
   				F.checked = state; 
}

Posted: Sat May 06, 2006 12:42 pm
by n00b Saibot
say doh! :P

Code: Select all

<script>
state = false;

function doCheck(formName, fieldName)
{
 var F = document.forms[formName].elements[fieldName];
 var len = F.length;
 state = !state;

 alert(formName + " : " + fieldName + " : " + len + " : " + state);

 for(i=0; i<len; i++)
  if(F[i].type == "checkbox")
   F[i].checked = state;
  else
  {
   msg = "";
   for (xProp in F)
    msg += xProp + " : " + F[xProp] + "\n";
   alert(msg);
  }   
}
</script>
<form name="frm">
<input type="checkbox" name="chk[]" />
<input type="checkbox" name="chk[]" />
<input type="checkbox" name="chk[]" />
<input type="checkbox" name="chk[]" />
<input type="checkbox" name="chk[]" />
<input type="checkbox" name="chk[]" />
<br />
<input type="button" onclick="doCheck(this.form.name, 'chk[]')" value="Check/UnCheck All" />
</form>
you forgot to attach indexes to F ;)
also added
- a permanent storage for state so that same button acts as select and deselect btn
- a view of parameters passed
- a view of properties when an object is not a checkbox

DOH!

Posted: Sat May 06, 2006 1:15 pm
by s.dot
Error: 'state' is undefined

:P I have a feeling it's close though. and I didn't FORGET, i just don't know HOW =]

DOH!!


Edit: I added var infront of state = !state; and it seems to work for checking them. gotta get rid of the alerts and try unchecking them

Edit #2: Not unchecking :P

Edit #3: The alert always says 'commentList : cid[] : 2 : true' on check and uncheck

Many thanks for helping me.

any ideas on getting the uncheck all working?

Posted: Sat May 06, 2006 1:30 pm
by matthijs
Maybe Dustins code will give you some ideas? http://www.dustindiaz.com/check-one-che ... avascript/

Posted: Sun May 07, 2006 3:05 pm
by s.dot
I got n00b sailbots post working by adding the state = false; to the top of it! I didn't see it before because it wasn't inside the function.

Many thanks!

Posted: Sun May 07, 2006 3:19 pm
by s.dot
A quick note

if there is only one checkbox to be checked using this function, it doesn't work.

So I added the line

Code: Select all

if(!len)
  F.checked = state;
and all works good =]