www.webdeveloper.com
Results 1 to 4 of 4

Thread: Select All JavaScript for multiple sets of checkboxes

  1. #1
    Join Date
    Jun 2004
    Posts
    2

    Question Select All JavaScript for multiple sets of checkboxes

    Hi -

    So I found this nifty little JavaScript that almost works exactly as I want it to - but not quite.

    What I want to do is have two SelectAll/Select None checkboxes that each sit below two different sets of results on a page.

    Both result sets sit within the same form.

    When I click the "Select All" checkbox below the first set of results, it selects all or deselects all of the rows in the first

    set.

    When I click the "Select All" checkbox below the second set of results, it selects all or deselects all of the rows in the

    second set.

    The javascript I'm using works off of a style class for each set of checkboxes, so the fact that the result sets are all within

    the same form doesn't impede this from working. However, the JavaScript I have doesn't Select All or Select None; rather, it

    selects the inverse of the set. That is, if three checkboxes are checked and 7 are not, then clicking on the checkbox deselects

    the three and selects the seven. Interesting, but not what I'm after.

    Can anyone tell me how to modify this so that the script simply selects all or deselects all for each respective set?

    <script language="JavaScript">
    function checkAll(theForm, cName) {
    for (i=0,n=theForm.elements.length;i<n;i++)
    if (theForm.elements[i].className.indexOf(cName) !=-1)
    if (theForm.elements[i].checked == true) {
    theForm.elements[i].checked = false;
    } else {
    theForm.elements[i].checked = true;
    }
    }
    </script>

    <form id="selectForm">

    Set 1:
    <br>
    <input type="checkbox" name="selected" value="01" class="results1"><br>
    <input type="checkbox" name="selected" value="02" class="results1"><br>
    Select All/None <input type="checkbox" onclick="checkAll(document.getElementById('selectForm'), 'results1');" />
    <br>
    <br>

    Set 2:
    <br>
    <input type="checkbox" name="selected" value="01" class="results2"><br>
    <input type="checkbox" name="selected" value="02" class="results2"><br>
    Select All/None <input type="checkbox" onclick="checkAll(document.getElementById('selectForm'), 'results2');" />

    </form>

  2. #2
    Join Date
    Dec 2002
    Location
    Taiwan
    Posts
    1,297
    Try this instead:

    Code:
    
    <script language="JavaScript">
    function checkAll(theForm, cName, status) {
    for (i=0,n=theForm.elements.length;i<n;i++)
      if (theForm.elements[i].className.indexOf(cName) !=-1) {
        theForm.elements[i].checked = status;
      }
    }
    </script>
    
    <form id="selectForm">
    
    Set 1:
    <br>
    <input type="checkbox" name="selected" value="01" class="results1"><br>
    <input type="checkbox" name="selected" value="02" class="results1"><br>
    Select All/None <input type="checkbox" onclick="checkAll(document.getElementById('selectForm'), 'results1', this.checked);" />
    <br>
    <br>
    
    Set 2:
    <br>
    <input type="checkbox" name="selected" value="01" class="results2"><br>
    <input type="checkbox" name="selected" value="02" class="results2"><br>
    Select All/None <input type="checkbox" onclick="checkAll(document.getElementById('selectForm'), 'results2', this.checked);" />
    
    </form>
    

  3. #3
    Join Date
    Jun 2004
    Posts
    2

    Wow that was fast.

    Works like a charm. Thank you very much, I really appreciate it.

    - Dylan

  4. #4
    Join Date
    Jan 2009
    Posts
    7
    thanks! i looked everywhere for this but couldn't find it anywhere!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles