Toggle all checkboxes when one checkbox is checked.

Hi experts,

I am currently having problems allowing my users to check all the checkboxes by just clicking one checkbox.

As i'm a newbie to javascript, I have seen some javascripts over the net and have attempted to reuse them. The one i'm current using goes something like this.

<SCRIPT LANGUAGE="JavaScript">  //check all checkboxes
<!-- Begin
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
  for (i = 0; i < field.length; i++) {
  field[i].checked = true;}
  checkflag = "true";
  return "Uncheck all"; }
else {
  for (i = 0; i < field.length; i++) {
  field[i].checked = false; }
  checkflag = "false";
  return "Check all"; }
}
//  End -->
</script>

and in the form

<input type="checkbox" value="Check all" onClick="this.value=check(this.form.username)">

This code would allow the user to select all boxes by checking the above checkbox, and unselect all, simply by unselecting this checkbox.

There is a logical error however, this code only works if there are 3 or more checkboxes(inclusive of the original one). If there are only 2 checkboxes, ie this one and just 1 option available, this code wont run.

I have tried changing the values in the for loop, nothing seems to be working.

I am pretty new to javascript and am looking for a basic short and quick script to implement this function. Is there anyway the code can be modified to achieve my desired result?
lodelodeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NetGrooveCommented:
How about this one:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">  //check all checkboxes
<!-- Begin
function check(theButton, boxName) {
 theBox = theButton.form[boxName];
 boxState = (theButton.value=="Check all")?true:false;
 for(i=0;i<theBox.length;i++) {
     theBox[i].checked = boxState;
 }
 theButton.value=(boxState==true)?"Uncheck all":"Check all";
}
//  End -->
</script>
</head>
<form>
<input type=checkbox name="username" value="A"> A
<input type=checkbox name="username" value="B"> B
<input type=checkbox name="username" value="C"> C
<input type=button value="Check all" onClick="check(this, 'username')">
</form>
</body>
</html>



0
lodelodeAuthor Commented:
Hi netgroove,

the code u provided doesnt seem to be working. i replaced the input type button as input type="checkbox". would this be causing it to fail?

also,
the master checkbox, ie the one that allows user to toggle all the other checkboxes is at the top of all the other checkboxes, not below. is this causing any error as well?
0
NetGrooveCommented:
Is this doing better:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">  //check all checkboxes
<!-- Begin
function check(mBox, boxName) {
 theBox = mBox.form[boxName];
 for(i=0;i<theBox.length;i++) {
     theBox[i].checked = mBox.checked;
 }
}
//  End -->
</script>
</head>
<form>
<input type=checkbox onClick="check(this, 'username')"> All<br>
<input type=checkbox name="username" value="A"> A<br>
<input type=checkbox name="username" value="B"> B<br>
<input type=checkbox name="username" value="C"> C<br>
</form>
</body>
</html>



0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

lodelodeAuthor Commented:
sorry dude, still aint working.
0
lodelodeAuthor Commented:
i have a form on this page tho, is that in anyway going to affect?
0
NetGrooveCommented:
Show me your page.

0
lodelodeAuthor Commented:
<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<title>list all users</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">  //check all checkboxes
<!-- Begin
function check(mBox, boxName) {
 theBox = mBox.form[boxName];
 for(i=0;i<theBox.length;i++) {
     theBox[i].checked = mBox.checked;
 }
}
//  End -->
</script>

</head>

<body>
<%
Class.forName("org.gjt.mm.mysql.Driver");
Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "");
Statement statement = connection.createStatement();
ResultSet rs = statement.executeQuery("Select Username, name from users where Username not like 'admin';");
String name, username;
%>

<form action="deluser.jsp" method="post" onsubmit="if(!confirm('Confirm Delete?')) return false">

<TABLE>
<TR>
<TH>User name</TH>
</TR>
<tr><td>
<%
boolean b = rs.first();
if (b == false){
out.println("no users created");
}
else {
rs.beforeFirst();
%>
<tr><td><input type=checkbox onClick="check(this, 'username')"> Choose All </td></tr>
<%
while(rs.next())
{
 name = rs.getString("name");
 username = rs.getString("username");
%>
</td></tr>

<TR><TD><a href="drilldown_action.jsp?username=<%= username %>"><input type="checkbox" name="username" value="<%= username%>"><%= name %></a></TD></TR>
<br>
</TABLE>

<%}} %>

<% if(b) { %> <!-- if no users, dont show the delete button -->
<input type="Submit" value="Delete" name="Delete">
<% }%>
</form>



<%
statement.close();
connection.close();
%>


</body>
</html>
0
NetGrooveCommented:
I see no problems in your code.

Could you please extract also the resulting browser code and post it here?

0
NetGrooveCommented:
You can of course cut some identical lines and change the person names of your users.

0
jaysolomonCommented:
Try this link. I think it has exactly what your looking for.

If you have questions about it let me know

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20694351.html
0
lodelodeAuthor Commented:

<html>
<head>
<title>list all users</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">  //check all checkboxes
<!-- Begin
function check(mBox, boxName) {
 theBox = mBox.form[boxName];
 for(i=0;i<theBox.length;i++) {
     theBox[i].checked = mBox.checked;
 }
}
//  End -->
</script>

</head>

<body>


<form action="deluser.jsp" method="post" onsubmit="if(!confirm('Confirm Delete?')) return false">

<TABLE>
<TR>
<TH>User name</TH>
</TR>
<tr><td>

<tr><td><input type=checkbox onClick="check(this, 'username')"> Choose All </td></tr>

</td></tr>

<TR><TD><a href="drilldown_action.jsp?username=asd"><input type="checkbox" name="username" value="asd">unfilled</a></TD></TR>
<br>
</TABLE>



 <!-- if no users, dont show the delete button -->
<input type="Submit" value="Delete" name="Delete">

</form>






</body>
</html>
0
NetGrooveCommented:
Sorry, now I see your problem!
Wait a second.

0
lodelodeAuthor Commented:
Hi Jaysolomon,

Appreciate your help on this. The concept for the question(in the link you gave me) is a little too high end for me.

All i need is something simple, or what people would call "quick and dirty".

Any clue on that?
0
NetGrooveCommented:
Use this script:

function check(mBox, boxName) {
 theBox = mBox.form[boxName];
 if(theBox.length){
   for(i=0;i<theBox.length;i++) {
     theBox[i].checked = mBox.checked;
   }
 } else {
   theBox.checked = mBox.checked;
 }
}

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lodelodeAuthor Commented:
hi netgroove,
its working perfectly now!


could you give me a brief rundown of why my former script wasnt working?(if possible)
and what was causing the error in the first few scripts you gave me?

just wanna learn more about javascript as i go along. hope ya dont mind!
0
NetGrooveCommented:
Thanks for the points.

It was my fault.
Normally is checking and unchecking a trivial task.
Except, and this was in your case, when you have the exception that only ONE checkbox is to be checked and unchecked.
For doing it on two, three or more boxes you fetch an array of elements and loop on that array for the count of elements. The count is returned in the length property.
If you get only one checkbox from the fetch, then there is no length property and you can directly handle that one checkbox.

The problem was that I did not think about that exception until I did see your generated code.
This exception anyway occur only for checkboxes generated from database by some server side script, like you did it.
Now I will care for that exception, at least for the next time :)

See you,
NetGroove

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.