Results 1 to 7 of 7

Thread: How to check all the checkboxes by using JavaScript?

  1. #1
    Join Date
    Jan 2012
    Posts
    68

    How to check all the checkboxes by using JavaScript?

    Let me know if you are having anyway to check all the javascript code to select all checkboxes by using while...loop.
    The below mentioned code is placed on the header on top of yours page 1
    Code:
    <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 below mentioned code can display checkboxes which are included in the page 2
    Code:
    echo "<a class='comp' onclick='singleHideandShow({$row['pr_id']})' style='cursor ointer'>{$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>";
    as I am clicking on the Check All button it is prompting with an error message.
    Message: 'length' is null or not an object
    Line: 15
    Char: 13
    Code: 0
    any help on this particular matter will be highly appreciated.

  2. #2
    Join Date
    Nov 2010
    Posts
    73

    Re: How to check all the checkboxes by using JavaScript?

    There is no need of having 2 functions rather than that of single function need to check or uncheck all the checkboxes of yours.

    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 wanted a button which will let you check/uncheck all of your checkboxes then you will need 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>

  3. #3
    Join Date
    Nov 2010
    Posts
    86

    Re: How to check all the checkboxes by using JavaScript?

    If it does not work for you then you can also try below mentioned code. It is working with all the browsers.
    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>


    All the browsers are having support for document.getElementById(). The previous version of IE9 are not having support for document.getElementsByClassName(). There is no need of having multiple buttons/links or function to select or deselect all. the only one link/button and one function. Only you should check out whether browser which you are having support for document.getElementsByClassName() or not.

  4. #4
    Join Date
    Mar 2011
    Posts
    160

    Re: How to check all the checkboxes by using JavaScript?

    Normally giving a same name to the checkboxes is not a good practice. If the form data is going to use in the php script then they are not corrected. same name is given to the group of radio buttons. I think you are not aware of the thing that every single HTML page should have valid doctype. As far as I know the IE will get into quirksmode when it is not able to get doctype and it causes the issue. I don’t know whether document.getElementsByClassName() is being supported on the IE8.

  5. #5
    Join Date
    May 2011
    Posts
    105

    Re: How to check all the checkboxes by using JavaScript?

    In general situation when you are supposed to output data from the database row and adding the same into the checkboxes at the end of every single row is selected or deselected. According to me checkbox would offer much more than that of separate containers and getElementsByTagName() will not be useful. To get maintenance and flexibility the best thing which I can suggest you that you should create a class for the desired checkboxes and collect the same by the class names by using JavaScript. Once you have given a class name you can placed them anywhere on the web page and there will not be any need to make any changes on the JavaScript. Also there will not be any issue if you don’t use any other elements such as <form>.

  6. #6
    Join Date
    May 2011
    Posts
    102

    Re: How to check all the checkboxes by using JavaScript?

    According to me the thing which you are looking for is bit simple to do. you should use below mentioned code.

    Code:
    <form action="deleteUsers.php" method="post">
                <div>
                    <input type="checkbox" name="delUsers[]" value='id1'/>User 1<br />
                    <input type="checkbox" name="delUsers[]" value='id2' />User 2<br />
                    <input type="checkbox" name="delUsers[]" value='id3' />User 3<br />
                    <input type="checkbox" onclick="selectAll(this)" />(un)check all<br />
                    <input type="submit" value="Delete users" />
                </div>
            </form>
            <script>
                function selectAll(elem){
                    var chkboxes = document.getElementsByName('delUsers[]');
                    for(i=0; i<chkboxes.length; i++){
                        chkboxes[i].checked = elem.checked;
                    }
                } 
            </script>
    After that you should build a query into the deleteUsers.php where you will be able to build your query so that you can process the passed userID by using below mentioned command.
    Code:
    <?php
    
    if(isset($_POST['delUsers'])){
        $str = implode(',',$_POST['delUsers']);
        $query = 'delete from users where userID in('.$str.')';
        
        echo $query;
    
    //if all users were selected $query is 
    //delete from users where userID in(id1,id2,id3) 
    }
    
    ?>
    If the user IDs are string then you should simply wrap them into $query.

  7. #7
    Join Date
    Jun 2011
    Posts
    45

    Re: How to check all the checkboxes by using JavaScript?

    You can use below mentioned code to pass the javascript code to javascript function which would let you know about select on unselect. Let me know whether it was useful to you.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <div id="mydiv1">
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/><br>
    check all<input type="checkbox" onclick="checkedAll(this.checked,'mydiv1')"/>
    </div>
    
    <div id="mydiv2">
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/><br>
    check all<input type="checkbox" onclick="checkedAll(this.checked,'mydiv2')"/>
    </div>
    
    
    <script type="text/javascript">
    function checkedAll (boxchecked,thediv) {
    var els = document.getElementById(thediv).getElementsByTagName("input");
    var len = els.length;
    for (var i = 0; i < len; i++) {
    els[i].checked = boxchecked;
    }
    }
    	
    </script>
    </body>
    </html>

Similar Threads

  1. How to validate checkboxes and radiolist in ASP.NET
    By Chitrakala in forum Software Development
    Replies: 5
    Last Post: 14-01-2011, 08:14 AM
  2. Can we get checkboxes in XP like Windows Vista
    By Michael Sabin in forum Customize Desktop
    Replies: 6
    Last Post: 24-09-2009, 05:46 PM
  3. How to check if value is numeric javascript
    By Paramartha in forum Software Development
    Replies: 3
    Last Post: 10-08-2009, 03:34 PM
  4. How to create .Net custom checkboxes for listview
    By Rover in forum Software Development
    Replies: 2
    Last Post: 11-06-2009, 09:40 AM
  5. How to set sessions for checkboxes
    By RogerFielden in forum Software Development
    Replies: 3
    Last Post: 15-04-2009, 02:07 PM

Tags for this Thread

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
  •  
Page generated in 1,711,637,311.53647 seconds with 17 queries