Skip Navigation | Home | Code Samples | Articles | Links | About | Contact Me | Make a Payment

Checkbox Check All/Indeterminate

Note: This example doesn't seem to have an discernible difference in Firefox thanks to its incredibly shortsighted lack of support for any sort of graphical representation of the indeterminate attribute. Oh, it supports it via scripting and what-not. However, it doesn't indicate it visually to the user in any way. Better still, it doesn't support the CSS3 :indeterminate pseudoclass.

w/ Indeterminate
w/o Indeterminate


function toggleChecked(oElement) 
{ 
  oForm = oElement.form; 
  oElement = oForm.elements[oElement.name]; 
  if(oElement.length) 
  { 
    bChecked = oElement[0].checked; 
    for(i = 1; i < oElement.length; i++) 
      oElement[i].checked = bChecked; 
  } 
} 

function toggleIndeterminate(oElement) 
{ 
  oForm = oElement.form; 
  oElement = oForm.elements[oElement.name]; 
  if(oElement.length) 
  { 
    bIndeterminate = false; 
    bChecked = true; 
    nChecked = 0; 
    for(i = 1; i < oElement.length; i++) 
      if(oElement[i].checked) 
        nChecked++; 
    if(nChecked < oElement.length - 1) 
    { 
      if(nChecked) 
        bIndeterminate = true; 
      else 
      { 
        bIndeterminate = false; 
        bChecked = false; 
      } 
    } 
    else 
    { 
      bIndeterminate = false; 
    } 
    oElement[0].indeterminate = bIndeterminate; 
    oElement[0].checked = bChecked; 
  } 
}