[Javascript] Checkbox challenge

Fri May 7 13:09:05 CDT 2004

dev at qroute.net wrote:
>function CheckMax(maxNo,obj)
...
><input onClick='CheckMax(5,window.document.forms[0].MyBest)'

and Shawn Milo replied:
>If it works, it works.  But personally, I would avoid
>the extra variable.  If you already have 'numChecked',
>why not just use that as your test for whether you
>should pop up the 'alert' box?

I agree.  Passing the maximum number of checkboxes with every call is 
redundant and opens the door to the possibility of maxNo having a different 
value each time it's called.  Your maximum number of checked boxes ideally 
ought to be defined just once in your application and merely referred to 
thereafter.

If you don't mind that number being defined inside javascript, just declare
         var maxNo = 3
either inside function CheckMax() if that's the only place it's used, or 
globally outside your function declarations if it must be used by more than 
one function.

Then you can remove maxNo from your onclick function call:
         onClick='CheckMax(this)'
         ...
         function CheckMax(obj)

If you want the person updating the html to be able to change maxNo without 
messing with Javascript, you can declare its value in a hidden form field:

         <input type="hidden" id="maxNo" value="3">
         ...
         function CheckMax()
                 var maxNo = document.getElementById("maxNo").value

To protect against errors, don't assume the HTML maxNo is a valid number, 
and don't even assume the hidden form field is properly named:

         // try to read maxNo from hidden form field
         var oMaxNo = document.getElementById("maxNo")
                 if (oMaxNo) maxNo = oMaxNo.value

                 // if invalid, use default value
                 if (isNaN(maxNo)) maxNo = iMaxNoDefault
                 if (maxNo < 1) maxNo = iMaxNoDefault
________________________

You can go further to separate behavior from structure if you assign the 
onclick event to each checkbox using Javascript instead of HTML:

1) Add the onload event to the body tag:

         <body onload="CheckboxInit()">

2) Add the initialization routine:

         function CheckboxInit()
         {
                         // bail if the browser can't speak DOM
                         if (!document.getElementsByName) return

                 // for all the MyBest checkboxes...
                 var aBoxes = document.getElementsByName("MyBest")
                 for(var iBox = 0; iBox < aBoxes.length; iBox++)
                 {
                         // assign the event
                         aBoxes[iBox].onclick = CheckMax
                 }
         }

3) Remove the onclick property from the HTML input fields:

         <input type="checkbox" name="MyBest" value="Intelligent" 
ID="Checkbox1">

4) Remove the 'obj' argument from the CheckMax() function call:

         function CheckMax()

and replace 'obj' with 'this' inside the function:

                 var aObjects = this.form[this.name]
                 ...
                 this.checked=false

Note that this syntax:
         aBoxes[iBox].onclick = CheckMax
assigns the CheckMax() function to a box's onclick event in such a way that 
the Javascript keyword 'this' contains the checkbox object when it's 
called.  For more information on this, see Peter-Paul Koch's page about the 
'this' keyword at http://www.quirksmode.org/index.html?/js/this.html

Paul

At 05:19 AM 5/7/2004, Shawn Milo wrote:

>----- Original Message -----
>From: <dev at qroute.net>
>Date: Thu, 6 May 2004 16:58:35 -0700
>To: "[JavaScript List]" <javascript at LaTech.edu>
>Subject: Re: [Javascript] Checkbox challenge
>
> > I did it this way; it worked. Thank you guys !...
> >
> > <script>
> > function  CheckMax(maxNo,obj)
> > {
> >  var numChecked = 0
> >
> >  var bolPop=false;
> >  for(var x = 0; x < obj.length; x++){
> >   if(obj[x].checked){
> >    numChecked++
> >    if (numChecked>=maxNo) {
> >     bolPop=true
> >     obj[x].checked=false
> >    }
> >   }
> >  }
> >
> >  if (bolPop)
> >  {
> >   alert('You have already selected '+maxNo+' items. ')
> >  }
> >
> >  return true;
> > }
> > </script>
>
><snip>
>
>If it works, it works.  But personally, I would avoid
>the extra variable.  If you already have 'numChecked',
>why not just use that as your test for whether you
>should pop up the 'alert' box?
>
>Shawn
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20040507/1a223211/attachment.html>