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.
Results 1 to 10 of 10
  1. #1
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,446
    Thanks
    275
    Thanked 32 Times in 31 Posts

    select/deselect checkbox one function

    Hi, i would rather not have buttons to check and uncheck all my checkboxes. I would rather have a single checkbox that when i check it, they all get checked, and when i uncheck it, they all get unchecked.

    I have put together several pieces that i found on here, and i can get the check all to work but the deselect all does not work..

    here is my javascript

    Code:
    function selectall(state)
    {
     var isChecked=false;
     var all=document.getElementsByName("selbox[]");
     
     if(all)
      { 
        for(var i=0; i < all.length; i++)
        {
          all[i].checked = state;
    
          if (!all[i].checked)
          {
           all[i].checked = true;
           isChecked = true;
           }//close if
         }//close for loop 
    
      }else{
    
            for(var i=0; i < all.length; i++)
            {
             all[i].checked = state;
    
             if (all[i].checked)
             {
              all[i].checked = false;
              isChecked = false;
              }//close if
            }//close for loop      
    
          }//close else
    
             
      if (!isChecked)
      {
      alert ("Please select at least one value");
      return (false);
      }//close if
    
    }//close function selectall
    here is the input for the single checkall checkbox

    Code:
    <input type="checkbox" name="select_all" id="select_all" onClick="return selectall(this.selbox);" />
    and here is the input for the array of items checked.

    Code:
    echo "<input type='checkbox' name='selbox[]' id='selbox' value='$rid' />";
    thanks..
    Last edited by durangod; 02-12-2013 at 10:00 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    Try this:-

    Code:
    <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>
    The Office Of Fair Trading says that before tax the UK has some of the cheapest fuel in Britain. - Presenter BBC News 24

    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.

  • #3
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,446
    Thanks
    275
    Thanked 32 Times in 31 Posts
    Thanks.

    question, im curious the purpose of this part

    Code:
    .getElementsByTagName("input");
    I have seen this a few times and not quite clear if i already have the value by Id then why do i need to get it by name type input. Im just unclear on that part...

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    Quote Originally Posted by durangod View Post
    Thanks.

    question, im curious the purpose of this part

    Code:
    .getElementsByTagName("input");
    I have seen this a few times and not quite clear if i already have the value by Id then why do i need to get it by name type input. Im just unclear on that part...
    We want to get all the elements with the tag "input" within the div with the id "mydiv" (and not those within some other div). OK?

    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
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,446
    Thanks
    275
    Thanked 32 Times in 31 Posts
    The problem is that i am not doing a div grouping, i am doing an array. So no that did not work, again the checkall does but the uncheck does not.

    I have have something that does work though, let me do some testing on this new idea i have.

  • #6
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,446
    Thanks
    275
    Thanked 32 Times in 31 Posts
    here is my new attempt, still not working at all now lol..

    Code:
    function selectAll(el, id)
    {
    var flag=true;
           var elems = el.form.elements;
           for(var i = 0; i < elems.length; i++)
           {
              if(elems[i].type == "checkbox" && elems[i].id == id) 
              {
                elems[i].checked = flag;
              }
           }
    
           if (flag) 
           {
           el.value = "Unselect All";
            } else {
                    el.value = "Select All";
                   }
    
    flag=!flag;
    
    }//close function selectAll

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    id is a reserved word.

    You should avoid giving names or id's to your variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.

    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.

  • #8
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,446
    Thanks
    275
    Thanked 32 Times in 31 Posts
    Quote Originally Posted by Philip M View Post
    id is a reserved word.

    You should avoid giving names or id's to your variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.

    did not know that, thanks for sharing that. That code by the way using the (el, id) came directly from a script i purchased awhile back so i guess i need to change that to. What is strange is that i copied it exactly with all the input elements and all the pieces of the process and it did not work, but it works in the other script.

    There are really only three parts, the js, and two inputs. One input for the option to checkall and the other for the id's (wether its a div or an array) thats why i could not believe this was so hard to make work.

    But i did get this to work... here is the code im using, if we can improve on it thats great, but it does work so i wanted to share this to help others.

    js part.

    Code:
    function selectAll()
    {
    var all=document.getElementsByName('selbox[]');
    var optall = document.getElementById('select_all');
    
             if(optall.value == 'Select All')
             {
                for(var i = 0; i < all.length; i++)
                {
                 all[i].checked = true;
                 }//close for loop
    
                 optall.value = 'deselect';
                            
             }else{
    
                   for(var i = 0; i < all.length; i++)
                   {
                    all[i].checked = false;
                    }//close for loop
    
                   optall.value = 'Select All';
    
                  }//close else
    
    }//close function selectAll
    the select all input checkbox

    this is part of what confused me because i could not figure out why we are with passing the value of this in other examples i have found on net when we load the var from the array or div in the js.

    we are not passing a value here and it works.

    Code:
    <input type="checkbox" name="select_all" id="select_all" value="Select All" onClick="selectAll();" />
    and lastly the input for the array of row id's

    Code:
    echo "<input type='checkbox' name='selbox[]' id='selbox' value='$recid' />";
    Any improvements u see that need to be done ?

    thanks
    Last edited by durangod; 02-12-2013 at 04:38 PM.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    Quote Originally Posted by durangod View Post
    Any improvements u see that need to be done ?
    If it works then let well alone! I don't see any obvious improvements.

    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.

  • Users who have thanked Philip M for this post:

    durangod (02-12-2013)

  • #10
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,446
    Thanks
    275
    Thanked 32 Times in 31 Posts
    Thanks for your help


  •  

    Posting Permissions

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