Click to See Complete Forum and Search --> : check all uncheck all toggle
lcscne
10-06-2003, 09:14 AM
I have a list of students with checkboxes next to them. I've built this list using an ASP loop and the unique name of each checkbox is the uique student id from my db.
Response.Write("<input name='"&rsStudentList("StudentID")&"' type='checkbox' value='' checked>")
At the begining of the list I have a single checkbox that I want to give the user the ability to toggle on/off all student checkboxes. I think I could muster this if it was an individual checkbox with a static name, however I'm stumped since all names are dynamic.
Any advice would be much appreciated. Remember Charles, I live by "keep it simple stupid".
Khalid Ali
10-06-2003, 09:33 AM
Check this link out, just change it from button to check box to select all
http://www.webapplikations.com/pages/html_js/forms/CheckboxesSelectForceToSelectAll.html
lcscne
10-06-2003, 10:00 AM
Mr. Ali, this example is exactly what I'm after. However it appears to me that you are calling a SelectAll() fucntion with the onclick handler which is not defined in the source but in an include file. May I see the source to SelectAll()? Thank you.
Khalid Ali
10-06-2003, 10:03 AM
Here is the function
function SelectAll(){
var checkboxes = document.getElementById("form1").cb;
var flag;
if(document.getElementById("form1").setselect.value=="Select All"){
document.getElementById("form1").setselect.value = "UnSelect All";
flag = true;
}else if(document.getElementById("form1").setselect.value=="UnSelect All"){
document.getElementById("form1").setselect.value = "Select All";
flag = false;
}
for(x=0;x<checkboxes.length;x++){
checkboxes[x].checked=flag;
}
}
This will be a bit more friendly in older browsers, if you need it to work in such.
<script type="text/javascript">
function setTicks(what) {
val = (what == "on") ? "checked" : "";
for (i=0; i<document.myform.elements.length; i++) {
(document.myform.elements[i].type == "checkbox") ? document.myform.elements[i].checked = val : "";
}
}
</script>
</head>
<body>
<form name="myform" action="">
<input type="checkbox" name="mycheck">
<input type="checkbox" name="mycheck">
<input type="checkbox" name="mycheck">
<input type="text">
</form>
<a href="#" onclick="setTicks('on'); return false;">Check</a> |
<a href="#" onclick="setTicks('off'); return false;">Uncheck</a>
lcscne
10-06-2003, 10:58 AM
Thank you both,
I have your code and its working except for one issue. All checkboxes have different names and it appears your code only handles one name. Is it possible to reference a class of object rather than its name then set its checked propertie to true? These are the only checkboxes on the page so I'm not running a risk of checking a checkbox accidently.
I really appreciate all your help, you guys do great work.
lcscne
10-06-2003, 11:05 AM
one other question:
Does .getElementById return the Name="" element or the ID="" element? I need the 'name' element to equal the studentID so I can pass that info to the next asp page as a querystring. However I think I can set all the 'ID' elements to the same name in order to overcome this obstacle. I'm not familiar with the difference between the ID elements and the name elements and how they are used.
lcscne
10-06-2003, 11:25 AM
Sorry pyro for overlooking your code. It works regardless of name. I seem to be up and running. Thanks again to both of you much appreciated.
My code will solve both of your problems. It doesn't matter what you name you checkboxes, it will do them all (in the current form, of course), and it doesn't use the id (or name) attribute, so you don't need to worry about that. Just for your reference, getElementById returns the ID, not the name. getElemenstByName returns the name...
[edit - Ah, ya beat me... :)]
lcscne
10-06-2003, 11:34 AM
OK one more question:
Is the onClick element hold a property value that can be changed? Is there a way to change the argument of a fucntion call? I like the button portion of Mr. Ali's code so I need to get the onClick to switch between "setTicks('on')" and "setTicks('off')" dynamically via javascript. I want it to toggle back and forth just like the
document.getElementById("frmStudentList").setselect.value = "UnSelect All";
and the
document.getElementById("frmStudentList").setselect.value = "Select All";
Ok, with my code, you can do that like this:
<script type="text/javascript">
flag = "";
function setTicks() {
(flag == "checked") ? flag = "" : flag = "checked";
for (i=0; i<document.myform.elements.length; i++) {
(document.myform.elements[i].type == "checkbox") ? document.myform.elements[i].checked = flag : "";
}
(document.myform.mybutton.value == "check") ? document.myform.mybutton.value = "uncheck" : document.myform.mybutton.value = "check";
}
</script>
</head>
<body>
<form name="myform" action="">
<input type="checkbox" name="mycheck">
<input type="checkbox" name="mycheck">
<input type="checkbox" name="mycheck">
<input type="button" name="mybutton" value="check" onclick="setTicks();">
</form>
jbergthorson
10-06-2003, 12:06 PM
I am unsure if you can change that property. It would seem to me that you could, i just don't know how without trying to do it myself and I don't have the time right now ;)
BUT:
An easy way to get you up and running right now is make one function that always gets called via onClick, then have a var that tells you what to do in that function.
eg:
var selectAll = true;
myOnClickFunction(){
if (selectAll) mySelectAllFunction();
else myDeSelectAllFunction();
selectAll = !selectAll;
}
then just do onClick="myOnClickFunction();"
I hope that is what you were kind of looking for... if not, then sorry for wasting your time!
jason
lcscne
10-06-2003, 12:15 PM
Pyro, rocks my world.
Case closed thanks to pyro and Mr. Ali.
Awesome. Happy to help... :)
wallacedm
10-06-2003, 05:58 PM
Be careful with the code provided by Khalid. If there's only one checkbox that comes out of the ASP loop, then referring to the checkbox as checkboxes[x] might not work.
To solve the identical problem, I needed two cases - I had one version of SelectAll (pretty much identical to Khalid's) that the ASP would include if there was more than one student on the list, and a different version if there was only one. The logic to pick one function or the other was in the ASP code.
Khalid Ali
10-06-2003, 07:08 PM
Solution I provided did not take into account the fact that there is one checkbox(its not custom made any given scenario) its a sample that provides some know how which can be used to learn the idea.
to make it work for the case where it could be more then one or a single box,you only need to add a single if statemtnt something like this will work regardless
if(checkboxes.length!=null){
for(x=0;x<checkboxes.length;x++){
checkboxes[x].checked=flag;
}
}else{
checkboxes.checked = flag
}