Results 1 to 5 of 5

Thread: Need code to Select All Checkbox

  1. #1
    Join Date
    Jul 2006
    Posts
    64
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default Need code to Select All Checkbox

    I have a page that displays all the users waiting to be approved or declined. so i would like a link that would allow me to Approve All and check all the approved boxs or Decline All boxes link

    thanks in advance

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    Well, there's a simple answer, but the code for it would be kinda long.
    Code:
    <html>
    <body>
    <a href="#" onClick="document.forms.form.checkbox.checked=1;">on</a>
    <a href="#" onClick="document.forms.form.checkbox.checked=0;">off</a>
    <form id="form">
    <input type="checkbox" id="checkbox">
    </form>
    </body>
    </html>
    That works, as is.

    However, adding each of the checkboxes to an onclick statement would be a bit much. So you may want to setup a function which lists each at the top of the page and just call that from onclick.


    Also, this doesn't search out checkboxes and make them all checked. I'm not sure if there is a way to do that. There may be, though.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Dec 2006
    Location
    Raleigh, NC
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    OK boss, got you covered:

    You need to do a couple things to get this to work. First, in your head section, you need these JavaScript functions:

    function checkAll()
    {
    var boxes = cBoxes.getElementsByTagName("input");
    for (var i = 0; i < boxes.length; i++) {
    myType = boxes[i].getAttribute("type");
    if ( myType == "checkbox") {
    boxes[i].checked=1;
    }
    }
    }
    function checkNone()
    {
    var boxes = cBoxes.getElementsByTagName("input");
    for (var i = 0; i < boxes.length; i++) {
    myType = boxes[i].getAttribute("type");
    if ( myType == "checkbox") {
    boxes[i].checked=0;
    }
    }
    }

    Then you need to enclose all the checkboxes in a div with id "cBoxes". If you choose another div id name, you need to replace cBoxes in the two functions above. (You could make the function take the div name as an argument, but for your purpose I think this is better).

    Example:

    <div id="cBoxes">

    // checkbox html

    </div>

    Then you make links that say check all and check none, and for their onclick events you call those functions. Examples:

    <a href="#" onClick=" return checkAll();">Check All</a>
    <a href="#" onClick=" return checkNone();">Check None</a>


    Thats all. Enjoy, and let me know if you have any problems.

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    There ya go. Ignore my post... that's much better information.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by djr33 View Post
    Ignore my post... that's much better information.
    Not entirely. There are several potential improvements.

    First, the code itself:

    Code:
    function checkAll() {
        var container;
    
        if (document.getElementById && (container = document.getElementById('cBoxes'))
                && container.getElementsByTagName) {
            var controls = container.getElementsByTagName('input');
    
            for (var i = 0, n = controls.length; i < n; ++i)
                if (controls[i].type == 'checkbox') boxes[i].checked = true;
        }
    }
    function checkNone() {
        var container;
    
        if (document.getElementById && (container = document.getElementById('cBoxes'))
                && container.getElementsByTagName) {
            var controls = container.getElementsByTagName('input');
    
            for (var i = 0, n = controls.length; i < n; ++i)
                if (controls[i].type == 'checkbox') boxes[i].checked = false;
        }
    }
    Better yet, if a group of checkboxes are to be controlled together, they are probably related in some way, and if they are, each one should share the same name - the value attribute distinguishes one from another. If this is feasible, then one can achieve better support by avoiding the getElementById and getElementsByTagName methods:

    Code:
    function setAll(checked) {
        var group = document.forms.FORM_NAME.elements.GROUP_NAME;
    
        for (var i = 0, n = group.length; i < n; ++i)
            group[i].checked = checked;
    }
    replacing FORM_NAME and GROUP_NAME with the relevant identifiers. Checking all of the controls would be achieved by passing true, otherwise false.

    Mike

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
  •