implement "select all" button to select all checkboxes

M

Matt

In ASP page, there is a "SELECT ALL" button, when user click it, it will
select all checkboxes. I am not sure should I use client-side code to do
that? the following is my approach but it didnt work.

<script language="JavaScript">
function selectAllCheckBox()
{ //alert(document.addzone.c1.value);
document.addzone.c1.value = "on";
}
</script>

<P><input type="checkbox" name="c1">
<P><input type="button" onclick="selectAllCheckBox()">


any ideas??
 
R

Roland Hall

:
: In ASP page, there is a "SELECT ALL" button, when user click it, it will
: select all checkboxes.
That is not possible unless you pass the form on the URL or the header and
then test when the page is loaded. ASP is server-side.

: I am not sure should I use client-side code to do
: that?
You should.

: the following is my approach but it didnt work.
: <script language="JavaScript">
: function selectAllCheckBox()
: { //alert(document.addzone.c1.value);
: document.addzone.c1.value = "on";
: }
: </script>
:
: <P><input type="checkbox" name="c1">
: <P><input type="button" onclick="selectAllCheckBox()">

1. language= on client-side is deprecated. Use type="text/javascript"
instead.
2. document.addzone.c1.value = "on"; is not correct for three reasons.
a. addzone is not present. If you just didn't show that and have the
following then it is ok.

<form id="addzone" name="addzone">
<P><input type="checkbox" name="c1">
<P><input type="button" onclick="selectAllCheckBox()">
</form>

b. You do not have a value set for c1 so value="".
c. You do not test a value to see if a checkbox has been checked. This will
work:
document.addzone.c1.checked=true;

Also, you're only showing one checkbox. If you want a way to select all at
once, then you can use different IDs and name all of them the same name and
use it as an array.

<html>
<head>
<title></title>
<script type="text/javascript">
function selectAllCheckBox() {
var formCol='', elCol='';
formCol = document.forms['addzone'];
elCol = formCol.c1;
for(i=0;i<elCol.length;i++) {
elCol(i).checked=true;
}
}
</script>
</head>
<body>
<form id="addzone" name="addzone">
<input type="checkbox" id="chk1" name="c1" value="1">One<br />
<input type="checkbox" id="chk2" name="c1" value="2">Two<br />
<input type="checkbox" id="chk3" name="c1" value="3">Three<br />
<input type="button" value="Check All Boxes" onclick="selectAllCheckBox()">
</form>
</body>
</html>

Clean up:
<p> should have </p>
Your button should have a value.

--
Roland

This information is distributed in the hope that it will be useful, but
without any warranty; without even the implied warranty of merchantability
or fitness for a particular purpose.
-Technet Knowledge Base-
http://support.microsoft.com/default.aspx?scid=fh;EN-US;kbhowto&sd=TECH&ln=EN-US&FR=0
-Technet Script Center-
http://www.microsoft.com/technet/treeview/default.asp?url=/technet/scriptcenter/default.asp
-MSDN Library-
http://msdn.microsoft.com/library/default.asp
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top