Chris Nielsen Chris Nielsen - 3 months ago 13
HTML Question

Javascript checkbox Uncheck all works, but Check all doesn't

I have this javascript for "Check All" and "Uncheck All" checkboxes. It used to work fine, but now that I have added some HTML formatting, I can't seem to get it to work right. The "Uncheck All" button seems to work, but the "Check All" button looks like it quickly checks and then unchecks all checkboxes in my form. What have I done wrong and how do I fix this so that both "Check All" and "Uncheck All" buttons work properly?

Here is my code:

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>

</style>
</head><body bgcolor="#99ccff">


<script type="text/javascript" language="javascript">
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document.forms[formname].getElementsByTagName('input');

for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>

<form name="list_form" action="#" method='POST'>
<input type="hidden" name="selected_region" value="APAC">
<input type="hidden" name="selected_qtr" value="Q1">
<input type="hidden" name="selected_year" value="2013">


<table width="300" cellpadding="0" cellspacing="25" valign="top" border="0">

<TR valign="top">
<td>
<table width="400" class="border0">
<TR valign="bottom">
<td id="tfont4"><b>Check Test</b><BR><hr><BR></td>
</tr>
</table>
</td>
</TR>

<tr>
<td>
<table width="400" cellpadding="0" cellspacing="0" valign="top" border="0">
<tr>
<td>
<input class="button" type="Submit" value="Check All" onclick="javascript:checkAll('list_form', true);" href="javascript:void();">
</td>
<td align="right">
<input class="button" type="Submit" value="Uncheck All" onclick="javascript:checkAll('list_form', false);" href="javascript:void();">
</td>
</tr>
</table>
</td>
</tr>

<table border="0" cellpadding="10" width="400">
<tr>
<td valign="top">
<input id="Indonesia" TYPE="checkbox" NAME="selected_countries" value="Indonesia">
<label for="Indonesia"><span><span></span></span>Indonesia</label><BR>
<input id="Malaysia" TYPE="checkbox" NAME="selected_countries" value="Malaysia">
<label for="Malaysia"><span><span></span></span>Malaysia</label><BR>
<input id="Singapore" TYPE="checkbox" NAME="selected_countries" value="Singapore">
<label for="Singapore"><span><span></span></span>Singapore</label><BR>
<input id="Thailand" TYPE="checkbox" NAME="selected_countries" value="Thailand">
<label for="Thailand"><span><span></span></span>Thailand</label><BR>
</td>
<td valign="top">
</td>
<td valign="top">
</td>
</tr>
</table>
<BR>
&nbsp;&nbsp;&nbsp;<input class="button" type="Submit" value="Generate Reports">
</form>
</center>

Answer

It seems to be working fine. The problem you mentioned maybe since you had the input type of the check and uncheck fields as submit instead of button.

    function checkAll(formname, checktoggle) {
      var checkboxes = new Array();
      checkboxes = document.forms[formname].getElementsByTagName('input');

      for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == 'checkbox') {
          checkboxes[i].checked = checktoggle;
        }
      }
    }
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <style>
  </style>
</head>

<body bgcolor="#99ccff">


  <form name="list_form" action="#" method='POST'>
    <input type="hidden" name="selected_region" value="APAC">
    <input type="hidden" name="selected_qtr" value="Q1">
    <input type="hidden" name="selected_year" value="2013">


    <table width="300" cellpadding="0" cellspacing="25" valign="top" border="0">

      <TR valign="top">
        <td>
          <table width="400" class="border0">
            <TR valign="bottom">
              <td id="tfont4"><b>Check Test</b>
                <BR>
                <hr>
                <BR>
              </td>
            </tr>
          </table>
        </td>
      </TR>

      <tr>
        <td>
          <table width="400" cellpadding="0" cellspacing="0" valign="top" border="0">
            <tr>
              <td>
                <input type="button" value="Check All" onclick="javascript:checkAll('list_form', true);" href="javascript:void();">
              </td>
              <td align="right">
                <input type="button" value="Uncheck All" onclick="javascript:checkAll('list_form', false);" href="javascript:void();">
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <table border="0" cellpadding="10" width="400">
        <tr>
          <td valign="top">
            <input id="Indonesia" TYPE="checkbox" NAME="selected_countries" value="Indonesia">
            <label for="Indonesia"><span><span></span></span>Indonesia</label>
            <BR>
            <input id="Malaysia" TYPE="checkbox" NAME="selected_countries" value="Malaysia">
            <label for="Malaysia"><span><span></span></span>Malaysia</label>
            <BR>
            <input id="Singapore" TYPE="checkbox" NAME="selected_countries" value="Singapore">
            <label for="Singapore"><span><span></span></span>Singapore</label>
            <BR>
            <input id="Thailand" TYPE="checkbox" NAME="selected_countries" value="Thailand">
            <label for="Thailand"><span><span></span></span>Thailand</label>
            <BR>
          </td>
          <td valign="top">
          </td>
          <td valign="top">
          </td>
        </tr>
      </table>
      <BR>&nbsp;&nbsp;&nbsp;
      <input class="button" type="Submit" value="Generate Reports">
  </form>
  </center>