Select Checkbox on Page Load

Rcoleman25 · 01-20-2013, 08:55 PM

Hello,

I need to automatically check a checkbox on page load. The thing is that the checkbox I want to check is a checkall box which checks others within the same form. Here is the code...



<script type="text/javascript">

/* This script and many more are available free online at

The JavaScript Source!! http://www.javascriptsource.com

Created by: Hillel Aftel |  */

function checkAll(checkname, exby) {

  for (i = 0; i < checkname.length; i++)

  checkname[i].checked = exby.checked? true:false

}

</script>



<form name ="vspecs">

<input type="checkbox" name="specall" onClick="checkAll(document.vspecs.equip,this)"> Select All

<input type="checkbox" name="equip" value="aride"> Air-Ride

Old Pedant · 01-20-2013, 10:29 PM

Silly code.

This:

Code:

    checkname[i].checked = exby.checked? true:false

should be shortened to just

Code:

    checkname[i].checked = exby.checked;

Also very poor code. Doesn't use { ... } around the for loop statements. Doesn't put a semicolon at the end of each statement. Doesn't declare the variable i. Would make me want to avoid code from that site.

*********

Anyway, two answers:

(1) Put that code at the *END* of your HTML, not in the <head> section.
And then just add

Code:

checkAll(document.vspecs.equip,document.vspecs.specall);

to the end of it.

That is:

Code:

<html>
<body>
<form name="vspecs">
<input type="checkbox" name="specall" checked 
       onclick="checkAll(document.vspecs.equip,this)"> Select All
<input type="checkbox" name="equip" value="aride"> Air-Ride
...
</form>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Hillel Aftel | */
function checkAll(checkname, exby) {
    for (i = 0; i < checkname.length; i++)
    {
        checkname[i].checked = exby.checked;
    }
}
checkAll(document.vspecs.equip,document.vspecs.specall);
</script>
</body>
</html>

(2) The better answer:
To begin with, named forms are obsolete. Use an ID for your form instead.

And then write the code using UNOBTRUSIVE JavaScript:

Code:

<!DOCTYPE html>
<html>
<body>
<form id="vspecs">
<label><input type="checkbox" name="specall"/> Select All </label>
<label><input type="checkbox" name="equip" value="aride"/> Air-Ride</label>
...
</form>
<script type="text/javascript">
(
  function()
  {
      var form = document.getElementById("vspecs");
      form.specall.onclick = checkall;

      function checkall() 
      {
          for (var i = 0; i < form.equip.length; i++)
          {
              form.equip[i].checked = form.specall.checked;
          }
      }
      // and checkall to get started:
      form.specall.checked = true;
      checkall();
  }
)(); 
</script>
</body>
</html>