SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    building checkall/uncheckall link

    i need help building a link that when clicked, will either check all (if one or more checkboxes is unchecked) or uncheck all, except i only want it to work for the checkboxes that share a variable name (as attributed to the input tag). i'm trying to make it using only one function.

    i've checked all over these forums and google and every script dealt only with checking/unchecking all checkboxes for the "entire form" regardless of the name of the <input /> tag, and most are activated with a button, which won't work for my design.

    this is all i have so far:

    Code:
    function checkAll(myform, myfield) {
    	for (i = 0; i < myform.myfield.length; i++)
    		myform.myfield[i].checked = true;
    	
    }
    
    function unCheckAll(myform, myfield) {
    	for (i = 0; i < myform.myfield.length; i++)
    		myform.myfield[i].checked = false;
    }
    Code:
    <form method="post" action="index.php" name="sql">
    
    ...
    
    <a href="#" onClick="checkAll(myform, field);">[√]</a>
    
    <input class="nobox" type="checkbox" name="users[]" value="users_id" />
    the brackets in the name have to be there because php requires them. i have 2 functions but want to combine them into one. i have multiple sets of checkboxes and each one will require it's own check/uncheck hyperlink.

    can you help me understand where i'm failing?

    thanks in advance,
    -Mondego

  2. #2
    SitePoint Zealot logitron's Avatar
    Join Date
    Feb 2006
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
      function checkAll(inputName)
      {
        var elementInput = document.getElementsByTagName('input')
        var unchecked = 0
    		
        for (var h = 0; h < elementInput.length; h++)
        {
          if (elementInput[h].getAttribute('type') == 'checkbox' && elementInput[h].getAttribute('name') == inputName)
          {
    	  if (elementInput[h].checked == false)
    	  {
    	    unchecked = 1
    	  }
          }
        }
    
        for (var i = 0; i < elementInput.length; i++)
        {
          if (elementInput[i].getAttribute('type') == 'checkbox' && elementInput[i].getAttribute('name') == inputName)
          {
            if (unchecked == 1)
            {
              elementInput[i].checked = true
            }
            else
            {
              elementInput[i].checked = false
            }
          }
        }
      }
    </script>
    This function takes two parameters. The first parameter, inputName, would take the value of the name attribute of input element for all checkboxes that you either want to check or uncheck. The second parameter, checked, would take on a boolean value of either 1 or 0 (1: check all; 0: uncheck all). Would this solve your problem? I've tested it, and it seems to work within your defined parameters. I hope it helps you. :P
    Last edited by logitron; Dec 22, 2006 at 17:24.
    Patrick Smith
    PHP Programmer

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mondego, welcome to SPF!

    I had a similar demo also:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Check/Uncheck All</title>
    <script type='text/javascript'>
    window.onload = function()
    {
      initCheckBehavior(
        ['cb1CA', 'cb1UA', 'form1', 'cb1[]'],
        ['cb2CA', 'cb2UA', 'form1', 'cb2[]'],
        ['cb3CA', 'cb3UA', 'form2', 'cb3[]'],
        ['cb4CA', 'cb4UA', 'form2', 'cb4[]']
      );
    }
    /*
      Each argument is an array with items as follows:
      [sCheckAllAnchorId, sUncheckAllAnchorId, sFormName, sCheckboxName]
    */
    function initCheckBehavior()
    {
      var i, ca, ua;
      for (i = 0; i < arguments.length; ++i) {
        a = document.getElementById(arguments[i][0]); // check all
        if (a) {
          a.onclick = doCheckBehavior;
          a._CBFORM_ = arguments[i][2];
          a._CBNAME_ = arguments[i][3];
          a._CBCHECKED_ = true;
        }
        a = document.getElementById(arguments[i][1]); // uncheck all
        if (a) {
          a.onclick = doCheckBehavior;
          a._CBFORM_ = arguments[i][2];
          a._CBNAME_ = arguments[i][3];
          a._CBCHECKED_ = false;
        }
      }
    }
    function doCheckBehavior()
    {
      var cb = document.forms[this._CBFORM_].elements[this._CBNAME_];
      for (i = 0; i < cb.length; i++) {
        cb[i].checked = this._CBCHECKED_;
      }
      return false;
    }
    </script>
    </head>
    <body>
    
    <form action='#' method='post' name='form1'>
    <p><input type='checkbox' name='cb1[]' value='cb1 1'> cb1 1</p>
    <p><input type='checkbox' name='cb1[]' value='cb1 2'> cb1 2</p>
    <p><input type='checkbox' name='cb1[]' value='cb1 3'> cb1 3</p>
    <p><a id='cb1CA' href=''>Check All</a> | <a id='cb1UA' href=''>Uncheck All</a></p>
    <hr>
    <p><input type='checkbox' name='cb2[]' value='cb2 1'> cb2 1</p>
    <p><input type='checkbox' name='cb2[]' value='cb2 2'> cb2 2</p>
    <p><input type='checkbox' name='cb2[]' value='cb2 3'> cb2 3</p>
    <p><a id='cb2CA' href=''>Check All</a> | <a id='cb2UA' href=''>Uncheck All</a></p>
    <hr>
    </form>
    
    <form action='#' method='post' name='form2'>
    <p><input type='checkbox' name='cb3[]' value='cb3 1'> cb3 1</p>
    <p><input type='checkbox' name='cb3[]' value='cb3 2'> cb3 2</p>
    <p><input type='checkbox' name='cb3[]' value='cb3 3'> cb3 3</p>
    <p><a id='cb3CA' href=''>Check All</a> | <a id='cb3UA' href=''>Uncheck All</a></p>
    <hr>
    <p><input type='checkbox' name='cb4[]' value='cb4 1'> cb4 1</p>
    <p><input type='checkbox' name='cb4[]' value='cb4 2'> cb4 2</p>
    <p><input type='checkbox' name='cb4[]' value='cb4 3'> cb4 3</p>
    <p><a id='cb4CA' href=''>Check All</a> | <a id='cb4UA' href=''>Uncheck All</a></p>
    <hr>
    </form>
    
    </body>
    </html>
    Last edited by MikeFoster; Dec 23, 2006 at 07:43.

  4. #4
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thank you both for you input.

    i think i forgot to mention that the names of the input tags won't be pre-known, nor the number of them; they will be generated by the script. i will definitely try these out as soon as i get back from vacation.

    thanks again!
    -mondego

  5. #5
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    logitron,

    i'm trying different ways of creating the hyperlink and i keep getting js errors. can you type out how the html link is supposed to look?

    here's what i have:
    Code:
    <a id="users" href="#" onClick="checkAll(users);">[√]</a>
    
    ...
    
    <input type="checkbox" name="users[]" value="users_id" />
    thanks,
    -mondego
    Last edited by Mondego; Dec 27, 2006 at 12:21.

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mondego View Post
    ...i think i forgot to mention that the names of the input tags won't be pre-known...
    Yes, that changes things.

    Let's back up and take another look at this.

    You need some script which checks/unchecks all checkboxes with the same name. There will be two 'A' elements to 'check all' and 'uncheck all' for each group of checkboxes with the same 'name'. This may be the key to your solution. Each 'A' element can be associated with a checkbox 'name'. One way to do this is to embed the checkbox 'name' in one of the 'A' element's attributes (id, name, class, etc.). For example, look at the code I posted above. The 'A' elements have their associated checkbox 'name' embedded in their 'id' attribute.

    Before we go any further, tell us whether or not you can change the PHP code so it will embed the checkbox 'name' in the corresponding 'A' elements.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It was pretty easy to change my previous demo to illustrate the idea in my last post. Try it online and the code follows.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Check/Uncheck All</title>
    <script type='text/javascript'>
    window.onload = function()
    {
      initCheckBehavior();
    }
    function initCheckBehavior()
    {
      var i, a;
    
      for (i = 0; i < document.links.length; ++i) {
        a = document.links[i];
        if (a.id.indexOf('UncheckAll_') != -1) {
          a.onclick = doCheckBehavior;
          a._CBNAME_ = a.id.substr(11) + '[]';
          a._CBCHECKED_ = false;
        }
        else if (a.id.indexOf('CheckAll_') != -1) {
          a.onclick = doCheckBehavior;
          a._CBNAME_ = a.id.substr(9) + '[]';
          a._CBCHECKED_ = true;
        }
      }
    }
    function doCheckBehavior()
    {
      var i, cb = document.getElementsByName(this._CBNAME_);
      for (i = 0; i < cb.length; ++i) {
        cb[i].checked = this._CBCHECKED_;
      }
      return false;
    }
    </script>
    </head>
    <body>
    
    <form action='#' method='post' name='form1'>
    <p><input type='checkbox' name='cb1[]' value='cb1 1'> cb1 1</p>
    <p><input type='checkbox' name='cb1[]' value='cb1 2'> cb1 2</p>
    <p><input type='checkbox' name='cb1[]' value='cb1 3'> cb1 3</p>
    <p><a id='CheckAll_cb1' href=''>Check All</a> | <a id='UncheckAll_cb1' href=''>Uncheck All</a></p>
    <hr>
    <p><input type='checkbox' name='cb2[]' value='cb2 1'> cb2 1</p>
    <p><input type='checkbox' name='cb2[]' value='cb2 2'> cb2 2</p>
    <p><input type='checkbox' name='cb2[]' value='cb2 3'> cb2 3</p>
    <p><a id='CheckAll_cb2' href=''>Check All</a> | <a id='UncheckAll_cb2' href=''>Uncheck All</a></p>
    <hr>
    </form>
    
    <form action='#' method='post' name='form2'>
    <p><input type='checkbox' name='cb3[]' value='cb3 1'> cb3 1</p>
    <p><input type='checkbox' name='cb3[]' value='cb3 2'> cb3 2</p>
    <p><input type='checkbox' name='cb3[]' value='cb3 3'> cb3 3</p>
    <p><a id='CheckAll_cb3' href=''>Check All</a> | <a id='UncheckAll_cb3' href=''>Uncheck All</a></p>
    <hr>
    <p><input type='checkbox' name='cb4[]' value='cb4 1'> cb4 1</p>
    <p><input type='checkbox' name='cb4[]' value='cb4 2'> cb4 2</p>
    <p><input type='checkbox' name='cb4[]' value='cb4 3'> cb4 3</p>
    <p><a id='CheckAll_cb4' href=''>Check All</a> | <a id='UncheckAll_cb4' href=''>Uncheck All</a></p>
    <hr>
    </form>
    
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply mike,

    there's actually only going to be one <a> tag controlling both checkAll and uncheckAll. if at least one checkbox is unchecked, clicking it will checkAll, otherwise, it will uncheckAll. (if the code for this is too complex to warrant it be written we can skip it.)

    also, please correct me if i'm wrong; i put the id="users" in the <a> element already. is this what you mean by naming it? (php requires a "[]" after the 'name' in the input element. will this affect the script any?)

    i'm writing the php myself so everything can be changed there (i just don't know jack about js)

    thanks,
    -mondego

    [edit] i just noticed you replied again with new code. let me try that out now


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •