Solved

Toggle all checkboxes when one checkbox is checked.

Posted on 2003-11-12
16
952 Views
Last Modified: 2008-03-17
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?
0
Comment
Question by:lodelode
  • 8
  • 7
16 Comments
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
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
 

Author Comment

by:lodelode
Comment Utility
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
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
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
 

Author Comment

by:lodelode
Comment Utility
sorry dude, still aint working.
0
 

Author Comment

by:lodelode
Comment Utility
i have a form on this page tho, is that in anyway going to affect?
0
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
Show me your page.

0
 

Author Comment

by:lodelode
Comment Utility
<%@ 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
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
I see no problems in your code.

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

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
You can of course cut some identical lines and change the person names of your users.

0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
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
 

Author Comment

by:lodelode
Comment Utility

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

Expert Comment

by:NetGroove
Comment Utility
Sorry, now I see your problem!
Wait a second.

0
 

Author Comment

by:lodelode
Comment Utility
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
 
LVL 10

Accepted Solution

by:
NetGroove earned 50 total points
Comment Utility
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
 

Author Comment

by:lodelode
Comment Utility
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
 
LVL 10

Expert Comment

by:NetGroove
Comment Utility
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now