Combine functions when clicked [SOLVED]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Combine functions when clicked [SOLVED]

Post 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;
}
Last edited by s.dot on Sun May 07, 2006 3:20 pm, edited 1 time in total.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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;
    }
  }
}
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

switch the "or" in the first if to "||" (two pipes) and change your "'button'" to "this"
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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[]');">
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

remove the quotes around "this."
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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; 
}
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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!
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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?
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Maybe Dustins code will give you some ideas? http://www.dustindiaz.com/check-one-che ... avascript/
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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!
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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 =]
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Post Reply