CODEWITHSUNDEEP
javascripthtml
Chris Nielsen
Chris Nielsen

Reputation: 849

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>

Upvotes: 0

Views: 126

Answers (3)

riyadi
riyadi

Reputation: 45

changing input type = "Submit" so input type = "button"

Upvotes: 0

Sam Anderson
Sam Anderson

Reputation: 300

Your buttons are set to submit your form, therefore the page is reloaded ( see the /# suffix on the URL when you press the button.
The easiest solution is to change <input type="submit"> You could either change the inputs to type="button". This way pressing the button runs the functions without submitting the form. Another option would be to add a preventDefault() method to an eventListener, such as:

document.getElementById(....).addEventListener("click", function(event)
{
    event.preventDefault();
    .....
});

This will also prevent the form being submitted.

Upvotes: 0

10100111001
10100111001

Reputation: 1832

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>

Upvotes: 3

Related Questions