Solved

Toggle all checkboxes when one checkbox is checked.

Posted on 2003-11-12
16
961 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
16 Comments
 
LVL 10

Expert Comment

by:NetGroove
ID: 9730985
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
ID: 9731017
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
ID: 9731049
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:lodelode
ID: 9731081
sorry dude, still aint working.
0
 

Author Comment

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

Expert Comment

by:NetGroove
ID: 9731099
Show me your page.

0
 

Author Comment

by:lodelode
ID: 9731226
<%@ 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
ID: 9731320
I see no problems in your code.

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

0
 
LVL 10

Expert Comment

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

0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9731477
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
ID: 9731482

<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
ID: 9731494
Sorry, now I see your problem!
Wait a second.

0
 

Author Comment

by:lodelode
ID: 9731497
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
ID: 9731507
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
ID: 9731519
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
ID: 9731595
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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

729 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