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 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Fire group of checkboxes at once

    I have a group of checkboxes that can all be checked at once via the first checkbox which toggles all. However, each of those checkboxes include an onclick-this function (also tried with onchange), but it does not fire at the toggling. How to make this happen?

    Code:
    <script>
    function checkall(n) {
     var togglebox = document.getElementsByName('toggle')[n];
     var boxes = document.getElementById('Categories').getElementsByTagName('div')[n].getElementsByTagName('input');
    
     for (var i = 0; i < boxes.length; i++) {
      if (togglebox.checked == true) {
       boxes[i].checked = true;
      }
      else {
       boxes[i].checked = false;
      }
     }
    }
    
    function category(o) {
     if (o.checked == true) {
      alert (o.value);
     }
    }
    </script>
    
    <div id="Categories">
     <div>
      <input type="checkbox" name="toggle" onclick="checkall(0);">Sections
      <input type="checkbox" name="category" value="1" onclick="category(this)">Section 1
      <input type="checkbox" name="category" value="2" onclick="category(this)">Section 2
      <input type="checkbox" name="category" value="3" onclick="category(this)">Section 3
     </div>
    </div>
    Much appreciated! Thanks!
    Last edited by snakehill; 02-13-2013 at 03:31 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,022
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Adapt this to your needs:-

    Code:
    <div id="mydiv1">
    A<input type="checkbox"><br>
    B<input type="checkbox"><br>
    C<input type="checkbox"><br>
    D<input type="checkbox"><br>
    E<input type="checkbox"><br> <br>
    </div>
    
    <script type="text/javascript">
    
    function checkByParent(aId, aChecked) {
    var collection = document.getElementById(aId).getElementsByTagName("input");
    for (var x=0; x<collection.length; x++) {
    if (collection[x].type.toLowerCase() == "checkbox") {
    collection[x].checked = aChecked;
    }
    }
    }
    
    function toggle(aId) {
    var collection = document.getElementById(aId).getElementsByTagName("input");
    for (var x=0; x<collection.length; x++) {
    if (collection[x].type.toLowerCase() == "checkbox") {
    if (collection[x].checked) {
    collection[x].checked = false;
    }
    else {collection[x].checked = true}
    }
    }
    }
    
    //checkByParent("mydiv1", true);  // check all boxes initially
    
    </script>
    
    <input type="button" value="Check All" onclick="checkByParent('mydiv1', true)">
    <input type="button" value="Uncheck All" onclick="checkByParent('mydiv1', false)">
    <input type="button" value="Toggle All" onclick="toggle('mydiv1')">

    “I don't pretend we have all the answers. But the questions are certainly worth thinking about..” - Arthur C. Clarke quotes (English Writer of science fiction, b.1917

    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
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    But when adding any onclick or onchange functions to the mydiv1 checkboxes, these don't fire either, they merely get checked but any of the functions they carry don't run.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,022
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    I am not sure that I understand that. onclick only works onclick (an actual click), not if the checkmark is changed programatically. onchange does not apply to checkboxes. I think you are trying to do something which cannot be achieved.

    You will have to use a button and a separate function to fire all the currently checked checkboxes if that is what you want.
    Last edited by Philip M; 02-12-2013 at 04:57 PM.

    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
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hmm.. any way you recommend for doing that in case of the code in the main post? You won't have to code it for me but I think I need a push in the right direction as for that.

    Thank you!!

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,022
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by snakehill View Post
    Hmm.. any way you recommend for doing that in case of the code in the main post? You won't have to code it for me but I think I need a push in the right direction as for that.

    Thank you!!
    As I say, it is not possible to to fire a function as though onclick when the state of the checkbox has been changed programatically.

    You will have to use a button and a separate function to fire all the currently checked checkboxes if that is what you want.

    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.

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by snakehill View Post
    I have a group of checkboxes that can all be checked at once via the first checkbox which toggles all.
    Due to an incorrect starting index, the code as shown does not do that.
    However, each of those checkboxes include an onclick-this function (also tried with onchange), but it does not fire at the toggling. How to make this happen?
    Code:
    <!DOCTYPE>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>TEST</title>
    </head>
    <body>
    
    <script>
    
    function checkall(n) 
    {
     var togglebox = document.getElementsByName('toggle')[n];
     var boxes = document.getElementById('Categories').getElementsByTagName('div')[n].getElementsByTagName('input');
    
     for( var i = 1; boxes[ i ]; i++ ) 
       if( ( boxes[i].checked = togglebox.checked ) )
         boxes[i].onclick();
    }
    
    function category(o) {
     if (o.checked == true) {
      alert (o.value);
     }
    }
    </script>
    
    <div id="Categories">
     <div>
      <input type="checkbox" name="toggle" onclick="checkall(0);">Sections
      <input type="checkbox" name="category" value="1" onclick="category(this)">Section 1
      <input type="checkbox" name="category" value="2" onclick="category(this)">Section 2
      <input type="checkbox" name="category" value="3" onclick="category(this)">Section 3
     </div>
    </div>
    </body>
    
    </html>

  • Users who have thanked Logic Ali for this post:

    snakehill (02-13-2013)

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,641
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The onclick for the checkbox that checks all the other checkboxes simply needs to call all the functions that the other onclicks call when the checkboxes are clicked individually.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    New Coder
    Join Date
    Sep 2011
    Posts
    19
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Brilliant! Thanks a whole bunch!!!


  •  

    Posting Permissions

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