[RESOLVED] A problem with checkboxes

@carlsbergJun 28.2006

I’m trying to write a js thing that will check or uncheck groups of checkboxes and I’m not doing very well – I think there’s something basic that i haven’t understood about when checkboxes are checked and when they’re not

here’s my code so far

[code=php]<html> <head> </head> <body>

<form name=f1>

<input type=”checkbox” name=”a1″ value=”1″>a1<br /> <input type=”checkbox” name=”a2″ value=”2″>a2<br /> <input type=”checkbox” name=”a3″ value=”3″>a3<br /> <input type=”checkbox” name=”a4″ value=”4″>a4<br /> <input type=”checkbox” name=”a5″ value=”5″>a5<br /> <br /> <input type=”checkbox” name=”a” value=”5″ onclick=”selectAll(this.value,this.name)”>Check/uncheck all<br /> <br />

<input type=”checkbox” name=”b1″ value=”1″>b1<br /> <input type=”checkbox” name=”b2″ value=”2″>b2<br /> <input type=”checkbox” name=”b3″ value=”3″>b3<br /> <input type=”checkbox” name=”b4″ value=”4″>b4<br /> <br /> <input type=”checkbox” name=”b” value=”4″ onclick=”selectAll(this.value,this.name)”>Check/uncheck all<br /> <br />

</form>

<script> function selectAll(val,name){ if(document.f1[‘name’].checked=true){ alert(name + ” checked”); for(var i=1;i<val;i++){ document.f1[‘name’+i].checked=true; } }else{ alert(name + ” unchecked”); for(var i=1;i<val;i++){ document.f1[‘name’+i].checked=false; } } } </script>

</body> </html>[/code]

the alert(name + ” checked”); part is triggered when i check and when i uncheck one of the ‘master’ checkboxes so there’s definitely something wrong here

has anyone got any ideas ?

thanks

to post a comment

JavaScript

11 Comments(s) _↴

@KorJun 28.2006 — #use the parameter as a variable, not as a string. Remove quotes.

if(document.f1[[B]name[/B]].checked=true){

... and so on

@carlsbergauthorJun 28.2006 — #ah yes, silly me

I'll try that

thanks

@carlsbergauthorJun 28.2006 — #ok - I did that and they all switch to checked as required but now it is impossible to uncheck the two "check all" checkboxes !

here's the updated code that half works

[code=php]<html>
 <head>
 </head>
 <body>
 
 <form name=f1>
 
 <input type="checkbox" name="a1" value="1">a1<br />
 <input type="checkbox" name="a2" value="2">a2<br />
 <input type="checkbox" name="a3" value="3">a3<br />
 <input type="checkbox" name="a4" value="4">a4<br />
 <input type="checkbox" name="a5" value="5">a5<br />
 
 <br />
 <input type="checkbox" name="a" value="5" onChange="selectAll(this.value,this.name)">Check/uncheck all<br />
 
 <br />
 <input type="checkbox" name="b1" value="1">b1<br />
 <input type="checkbox" name="b2" value="2">b2<br />
 <input type="checkbox" name="b3" value="3">b3<br />
 <input type="checkbox" name="b4" value="4">b4<br />
 
 <br />
 <input type="checkbox" name="b" value="4" onChange="selectAll(this.value,this.name)">Check/uncheck all<br />
 <br />
 
 </form>
 
 <script>
 function selectAll(val,name){
 if(document.f1[name].checked=true){ 
 for(var i=1;i<=val;i++){
 document.f1[name+i].checked=true;
 } 
 }else{ 
 for(var i=1;i<=val;i++){
 document.f1[name+i].checked=false;
 
   }
   document.f1[name].checked=false;
  }
 }
 </script>
 
 </body>
 </html>[/code]

You will see that once the "check all" boxes are checked once it's impossible to uncheck them

@KorJun 28.2006 — #I have simplified your code. Here it is:

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script type="text/javascript">
 function selectAll(c){
 var i=1;
 while(c.form[c.name+i]){
 c.form[c.name+i].checked=c.checked;
 i++;
 }
 }
 </script>
 </head>
 <body>
 <form name="f1">
 
 <input type="checkbox" name="a1" value="1">a1<br />
 <input type="checkbox" name="a2" value="2">a2<br />
 <input type="checkbox" name="a3" value="3">a3<br />
 <input type="checkbox" name="a4" value="4">a4<br />
 <input type="checkbox" name="a5" value="5">a5<br />
 
 <br />
 <input type="checkbox" name="a" value="5" onclick="selectAll(this)">Check/uncheck all<br />
 
 <br />
 <input type="checkbox" name="b1" value="1">b1<br />
 <input type="checkbox" name="b2" value="2">b2<br />
 <input type="checkbox" name="b3" value="3">b3<br />
 <input type="checkbox" name="b4" value="4">b4<br />
 
 <br />
 <input type="checkbox" name="b" value="4" onclick="selectAll(this)">Check/uncheck all<br />
 <br />
 
 </form> 
 </body>
 </html> 
 [/code]

@carlsbergauthorJun 28.2006 — #that's perfect

in fact it's so condensed that i'll have to think about how it works and will definitely learn something here

thanks

@KorJun 28.2006 — #that's not so complicate

Javascript use the "parent" reference of a form starting from it's elements

[I]element[/I].form // will return the form as an object without using the form's name

On the other hand, JSON with it's square brackets notation can condense the code. An element of a form can be written also as

document['formname']['elementname']

Combining this, in my code

c.form[c.name+i]

is the equivalent of

document.f1[c.name+i]

The rest... is a simple asignment of Boolean values...

@carlsbergauthorJun 28.2006 — #ok thanks for the explanation - i hadn't noticed that you were passing a reference to the form "this" to the function selectAll() - and using "c" to refer to it - i was confused because i'd also been using letters for my check boxes

thanks again !

@JMRKERJun 28.2006 — #Pardon my interruption, but in the following code is it valid to have the SAME NAME for an input checkbox?

OR

Would it be better to pass the first input name as a parameter in the second input name like: inverseAll(c,'a') and inverseAll(c,'b') after changing the second input name to something unique?

I don't get a javascript error with either method. ?

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script type="text/javascript">
 function selectAll(c){
 var i=1;
 while(c.form[c.name+i]){
 c.form[c.name+i].checked=c.checked;
 i++;
 }
 }
 
 function inverseAll(c) {
 var i=1;
 while(c.form[c.name+i]) {
 c.form[c.name+i].checked = !c.form[c.name+i].checked;
 i++;
 }
 }
 </script>
 </head>
 <body>
 <form name="f1">
 
 <input type="checkbox" name="a1" value="1">a1<br />
 <input type="checkbox" name="a2" value="2">a2<br />
 <input type="checkbox" name="a3" value="3">a3<br />
 <input type="checkbox" name="a4" value="4">a4<br />
 <input type="checkbox" name="a5" value="5">a5<br />
 
 <br />
 <input type="checkbox" name="a" value="5" onclick="selectAll(this)">Check/uncheck all<br />
 <input type="checkbox" name="a" value="" onclick="inverseAll(this)">Inverse all<br />
 <!-- NOTE: can input above have SAME NAME and be valid??? -->
 
 <br />
 <input type="checkbox" name="b1" value="1">b1<br />
 <input type="checkbox" name="b2" value="2">b2<br />
 <input type="checkbox" name="b3" value="3">b3<br />
 <input type="checkbox" name="b4" value="4">b4<br />
 
 <br />
 <input type="checkbox" name="b" value="4" onclick="selectAll(this)">Check/uncheck all<br />
 <input type="checkbox" name="b" value="" onclick="inverseAll(this)">Inverse all<br />
 <!-- NOTE: can input above have SAME NAME and be valid??? -->
 
 </form>
 </body>
 </html> 
 
 [/code]

I liked the dynamic naming of the checkboxes and wanted to see if it could be expanded.

@KorJun 28.2006 — #unlike [B]id[/B], the same [B]name[/B] can be accepted by more than a single element.

@phpnoviceJun 28.2006 — #Pardon my interruption, but in the following code is it valid to have the SAME NAME for an input checkbox?[/QUOTE]
Yes, duplicate [b]name[/b] values for anchors, frames, images, forms, and form elements create what could be called "control arrays" which must, then, be referenced via an index.

@JMRKERJun 28.2006 — #Thank you both for the additional information.

Also in #JavaScript _↴

List of CD drives Trying to get Syntax highlighter working here.Print part of window

Success!

Help @carlsberg spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] A problem with checkboxes

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] A problem with checkboxes

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴