Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 47
  1. #1
    New Coder
    Join Date
    Mar 2012
    Location
    Ontario, Canada
    Posts
    57
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Checkbox Array - ability to check all

    Hello

    I am trying to find a way to use the check all javascript code to select all my checkboxes within a while...loop.

    Codes goes as follows:

    within the header on the top of page 1:
    <SCRIPT LANGUAGE="JavaScript">
    function CheckAll(chk)
    {
    for (i = 0; i < chk.length; i++)
    chk[i].checked = true ;
    }

    function UnCheckAll(chk)
    {
    for (i = 0; i < chk.length; i++)
    chk[i].checked = false ;
    }
    </script>

    The code that displays the checkboxes, which is a page included onto page 1:
    echo "<a class='comp' onclick='singleHideandShow({$row['pr_id']})' style='cursorointer'>{$row['propname']}</a><p>";
    $propqry = mysql_query("SELECT * FROM users WHERE propid={$row['pr_id']}");
    //using the hide and show id number, once clicked it will display the below contents
    echo "<div id={$row['pr_id']} style='display:none;'>";
    while($propf = mysql_fetch_assoc($propqry)) {
    if($propf['uactive'] == "yes") {
    $pactive = "active";
    } else {
    $pactive = "deactivated";
    }
    //displays the information from the DB with a checkbox
    echo "<form name='myform' id='formmsg' method='post' action='profile.php?paction=edit&find=none' >";
    echo "&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' name='check_list' value='{$propf['us_id']}'>&nbsp;&nbsp;<a href='profile.php?paction=edit&pid={$propf['us_id']}' /><img src='../images/secure/edit.png' name='Edit' border='0' /></a>&nbsp;<a href='profile.php?paction=delete&pid={$propf['us_id']}' /><img src='../images/secure/delete.png' name='Delete' border='0' /></a><label class='cuser'>&nbsp;&nbsp;{$propf['fname']} {$propf['lname']}, &nbsp;&nbsp; ({$propf['uname']}), &nbsp;&nbsp; {$pactive}</label><br>";

    }
    echo "</form>";
    echo '<p><input type="button" name="Check_All" value="Check All" onClick="CheckAll(document.myform.check_list)"> <input type="button" name="Un_CheckAll" value="Uncheck All" onClick="UnCheckAll(document.myform.check_list)"> <p>';
    echo "</div>";


    I receive the following error message when I click on the Check All button.

    Message: 'length' is null or not an object
    Line: 15
    Char: 13
    Code: 0
    URI: http://www.domainname.com/profile.ph...edit&find=none



    Can anyone help me figure this out?

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    You don't need 2 functions. A single function is all you need to check/uncheck all the checkboxes.

    A quick and simple demo:

    Code:
        <body>
            <input type="checkbox" name="chk1" value="val1" class="chkAll" /><br />
            <input type="checkbox" name="chk2" value="val2" class="chkAll" /><br />
            <input type="checkbox" name="chk3" value="val3" class="chkAll" /><br />
            <input type="checkbox" name="chk4" value="val4" class="chkAll" /><br />
            <input type="checkbox" name="chk5" value="val5" class="chkAll" /><br />
            <label for="chkSelAll">Select all</label><input type="checkbox" id="chkSelAll" />
            <script type="text/javascript">
                var chkAllOA = document.getElementsByClassName('chkAll');
                document.getElementById('chkSelAll').onclick=function(){
                    for(i=0; i<chkAllOA.length; i++){
                        chkAllOA[i].checked = this.checked;
                    }
                }
        </script>
        </body>
    or if you want a button to check/uncheck all the checkboxes, you again really need only 1 button and 1 function:
    Code:
        <body>
            <input type="checkbox" name="chk1" value="val1" class="chkAll" /><br />
            <input type="checkbox" name="chk2" value="val2" class="chkAll" /><br />
            <input type="checkbox" name="chk3" value="val3" class="chkAll" /><br />
            <input type="checkbox" name="chk4" value="val4" class="chkAll" /><br />
            <input type="checkbox" name="chk5" value="val5" class="chkAll" /><br />
            <input type="button" id="btnSelAll" value="Select all" />
            <script type="text/javascript">
                var chkAllOA = document.getElementsByClassName('chkAll');
                var btnSelAll = document.getElementById('btnSelAll');
                btnSelAll.checked = false;
                btnSelAll.onclick=function(){
                    this.checked = (this.checked)? false : true;
                    this.value = (this.checked)? 'Uncheck all' : 'Check all';
                    for(i=0; i<chkAllOA.length; i++){
                        chkAllOA[i].checked = this.checked;
                    }
                }
        </script>
        </body>
    Last edited by webdev1958; 03-15-2012 at 06:44 AM.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    This may suit you better as it works in all browsers including <IE9:-


    Code:
    <html>
    <head>
    <title>Toggle Checkboxes</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    
    <form name = "myform" action='#'>
    <input name = "myname" type = "checkbox" value = "Red"> RED <br>
    <input name = "myname" type = "checkbox" value = "Blue"> BLUE <br>
    <input name = "myname" type = "checkbox" value = "White"> WHITE <br>
    <input name = "myname" type = "checkbox" value = "Green"> GREEN <br>
    <input name = "myname" type = "checkbox" value = "Yellow"> YELLOW<br><br>
    <input type = "radio"  name = "toggle" onclick = "cboxToggle(myname, !this.checked)">UNCHECK ALL<br>
    <input type = "radio"  name = "toggle" onclick = "cboxToggle(myname, this.checked)">CHECK ALL<br><br>
    
    <input type = "button"  value = " CHECK ALL" onclick = "cboxToggle(myname, !this.checked)"><br>
    <input type = "button"  value = " UNCHECK ALL"  onclick = "cboxToggle(myname, this.checked)"><br>
    
    <input type = "button" value = "CHECK/UNCHECK ALL" onclick = "toggleAll(myname)"<br>
    
    
    </form>
    
    <script type = "text/javascript">
    
    function cboxToggle(group, action) {
    for( var i=0, len = group.length; i < len; i++) {
    group[i].checked = action;
    }
    }
    
    var count = 0;
    function toggleAll(group) {
    if (count == 0) {
    for (var i=0, len = group.length; i < len; i++) {
    group[i].checked = true;
    count = 1;
    }
    }
    else {
    for (var i=0, len = group.length; i < len; i++) {
    group[i].checked = false;
    count = 0;
    }
    
    }
    }
    
    </script>
    
    </body>
    There are not many stewards about - you could count them on the fingers of one hand. There are six of them. - Commentator Live Sports Extra

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by webdev1958 View Post
    What browsers does the demo I posted not work in?
    The browsers I mentioned. Is that not clear? The hard fact is that your code will not work in <IE9. All browsers support document.getElementById(), although I do not understand your point as my code does not use that. IE <9 does not support document.getElementsByClassName(), and even then we find that IE9 requires a !DOCTYPE (not in your code). It is no good talking about "a simple fix". chellert is obviously a newcomer and I doubt if he appreciates that he needs to include additional code before your offering will work reliably in all browsers. Or that he must search for a fix in another thread. Why go out of your way to mislead people when a simpler code would work just fine?
    Last edited by Philip M; 03-15-2012 at 10:33 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Philip M View Post
    This may suit you better as it works in all browsers including <IE9:-
    For browsers that don't support document.getElementsByClassName(), the fix is very easy as I posted in another thread recently

    You don't need multiple buttons/links or functions to select/deselect all. One link/button and one function is all you need whether document.getElementsByClassName() is supported by the browser or not
    Last edited by webdev1958; 03-15-2012 at 10:36 AM. Reason: typos

  • #6
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    [ot]
    Quote Originally Posted by Philip M View Post
    Code:
    <input name = "myname" type = "checkbox" value = "Red"> RED <br> 
    <input name = "myname" type = "checkbox" value = "Blue"> BLUE <br>
    Giving checkboxes the same name is not normally done and if the form data is going to a php script, the way they are named is not correct.

    You normally give the same name to a group of radio buttons.

    [/ot]

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    [ot]

    Quote Originally Posted by Philip M View Post
    .....we find that IE9 requires a !DOCTYPE ......
    I think you'll find that every web developer worth their salt will tell you that every html page should have a valid doctype as you found out the hard way recently . Why you don't have one is beyond me . At the very least, IE goes into quirksmode when a doctype is missing and that can cause problems.

    When posting just a code snippet I obviously don't include a doctype, but when I post the entire html, you will notice that I always include a doctype

    [/ot]
    Last edited by webdev1958; 03-15-2012 at 10:58 AM.

  • #8
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    [ot]

    Quote Originally Posted by Philip M View Post
    ..... Or that he must search for a fix in another thread.
    I don't know if the op even cares if document.getElementsByClassName() is supported by IE8- or not so why spend time retyping something (s)he might not even care about?

    Assuming the op is even interested, if the op hasn't the time to spend a minute or so searching my posts then why should I be expected to spend time retyping a post .. For me it's a question of priorities and time available.

    [/ot]

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by webdev1958 View Post
    [ot]


    Giving checkboxes the same name is not normally done and if the form data is going to a php script, the way they are named is not correct.

    You normally give the same name to a group of radio buttons.

    [/ot]
    The standard PHP method to indicate that there are multiple controls with the same name requires the use of square brackets in the name of the control.

    <input type="checkbox" name="foo[]" value="1"> 1
    <input type="checkbox" name="foo[]" value="2"> 2
    <input type="checkbox" name="foo[]" value="3"> 3

    Here is another ultra-simple toggle script for checkboxes:-

    Code:
    <html>
    <head>
    <script type = "text/javascript">
    var checked = false;
    function checkedAll () {
    checked == true? checked = false:checked = true;
    var els = document.getElementById("mydiv").getElementsByTagName("input");
    var len = els.length;
    for (var i = 0; i < len; i++) {
    els[i].checked = checked;
    }
    }
    </script>
    </head>
    
    <body>
    <form id="myform">
    <div id = "mydiv">
    <input type="checkbox" name="chk1">
    <input type="checkbox" name="chk2">
    <input type="checkbox" name="chk3">
    </div>
    <br>
    Check/Uncheck All: <input type="checkbox" name="checkall" onclick="checkedAll();">
    </form>
    </body>
    </html>
    Last edited by Philip M; 03-15-2012 at 11:20 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    [ot]

    Quote Originally Posted by Philip M View Post
    The standard PHP method to indicate that there are multiple controls with the same name requires the use of square brackets in the name of the control.
    That's correct. The point I was making is that you don't normally give checkboxes the same name as you did, whether they are being sent to a php script or not. And they don't need the same name for the op's requirement in this case either.

    You normally give the same name to a group of radio buttons.

    [/ot]
    Last edited by webdev1958; 03-15-2012 at 11:01 AM.

  • #11
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Philip M View Post

    Here is another ultra-simple toggle script for checkboxes:-

    Code:
    <html>
    <head>
    <script type = "text/javascript">
    var checked = false;
    function checkedAll () {
    checked == true? checked = false:checked = true;
    for (var i = 0; i < document.getElementById("myform").elements.length; i++) {
    document.getElementById("myform").elements[i].checked = checked;
    }
    }
    </script>
    </head>
    <body>
    <form id="myform">
    <div id = "mydiv">
    <input type="checkbox" name="chk1">
    <input type="checkbox" name="chk2">
    <input type="checkbox" name="chk3">
    <br>
    Check/Uncheck All: <input type="checkbox" name="checkall" onclick="checkedAll();">
    </div>
    </form>
    </body>
    </html>
    You could also use getElementsByTagName() if there are other form elements.
    This is a very poor way of doing it imo because every control in the <form> will then be toggled between checked/unchecked whether it is suppoosed to be or not and whether it is meaningful or not....eg..why toggle a textbox if one was present since a checked property on a textbox is meangless?

    So if you have say textboxes or other radio buttons in the form, they also will be toggled which is obviuosly not what you would want.

    So a better and more efficient way is to just toggle the required checkboxes and nothing else
    Last edited by webdev1958; 03-15-2012 at 11:26 AM.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Yes, you are right. I revised the script to take account of this - but I did point out that you could also use getElementsByTagName() if there are other form elements. I accept that in reality there will be other form elements.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #13
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Philip M View Post
    Yes, you are right. I revised the script to take account of this - but I did point out that you could also use getElementsByTagName() if there are other form elements. I accept that in reality there will be other form elements.
    The red bit depends on the markup.

    In a typical case where you are outputing rows of data from a database and adding a checkbox at the end of each row for selecting/deselecting the row to do whatever, the checkboxes will much more often than not be in separate containers and so getElementsByTagName() would not be appropriate.

    In terms of maintenace and flexibilty, the easiest and best way imo is to give the relevant checkboxes a class and collect them by their class name in the javascript based on the demo I posted earlier.

    By giving them a class, they can then be placed anywhere on the page and you won't have to change the javascript at all. It also won't matter if there are or are not other elements in the <form>.

    Handling browsers that don't support document.getElementsByClassName() is a trivial task nowadays.
    Last edited by webdev1958; 03-15-2012 at 11:44 AM.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by webdev1958 View Post
    Handling browsers that don't support document.getElementsByClassName() is a trivial task nowadays.
    Yes, it is - but you ought to point out to inexperienced users that <IE9 does not support document.getElementsByClassName(), and additional code is required to overcome that. If you don't want to include it and see it as repetitious, then at least give a link to where that code can be found.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #15
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Philip M View Post
    Yes, it is - but you ought to point out to inexperienced users that <IE9 does not support document.getElementsByClassName(), and additional code is required to overcome that. If you don't want to include it and see it as repetitious, then at least give a link to where that code can be found.
    But you didn't point out to "inexperienced users" the pitfalls and inefficiencies in your code. I did that for you .

    So, why don't you lead by example and in the future point out the pitfalls in your code (at the very least like what can happen if you don't have a valid doctype) and then I will do the same. But like I said, it's a question of time available and priorities for me
    Last edited by webdev1958; 03-15-2012 at 11:59 AM.


  •  
    Page 1 of 4 123 ... LastLast

    Tags for this Thread

    Posting Permissions

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