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
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

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
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!
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

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
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
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
and all works good =]