SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Raskolnikov's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Label stating number of checkboxes checked

    Building on a post i posted a day or so ago, I have 5 columns of checkboxes.

    Is there a way with JS that i can have some sort of label at the bottom of each column that will in real time display the number of boxes in that column that are checked? I am guessing it will be a function that is called within the OnClick method of the checkboxes.

    thanks

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    take a look at the code I sent you from the last thread. Notice the loop here:
    Code:
    DED.applyCheckLimit = function(collection, limit) {
      DED.forEach(collection, function(el) {
        DED.addEvent(el, 'click', function(e) {
          var lim = 0;
          DED.forEach(collection, function(check) {
            if (check.checked) {
              lim++;
            }
          });
          if (lim > limit) {
            this.checked = false;
          }
        });
      });
    };
    The amount of checked elements is in the "lim" variable. you can write that to any element:
    Code:
    get('column-1-amount').innerHTML = lim;

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Get all the checkboxes into a group. Best way is probably to do getElementsByTagName from within the container that has all the checkboxes in it. Then loop through them, attaching an onclick event handler to each that calls a certain function, call it countCheckBoxes.

    countCheckBoxes then loops through the checkboxes and a variable acting as a counter is incremented by one every time the loop encounters a checkbox that is selected. You would of course make sure that you are only counting for the current column. Achieving this depends on whether you have classes for each column that can be used or if another counter needs to be used as the function cycles through the checkboxes in order to check that the current table cell is in the right column.

    That is an easy option but it seems dirty to have to go through all the checkboxes in a loop every time one of them is clicked. Another way, which is probably a bit neater and hopefully faster (especially if you have lots of checkboxes) is to build an object containing all the data when the event handlers are added. This assumes each checkbox has something that will uniquely identify it (which it should anyway). Let's assume it's its "value" attribute. You could then go along through your table building an object like so:
    Code:
    var chkboxes = {
      col1: [],
      col2: [],
      col3: []
    };
    Then onclick, you check which the parent column is (this requires the relevant cell containing the checkbox having a class of col1, for instance, or if you're not using a table, the relevant container) and add the checkbox's value to the col1 array if it isn't there already (you could also work this out by finding out if the box is checked or not). Otherwise remove it. Then you find the length property of this array and place this value in your label at the bottom of the table. How you do this depends on what element you wish to use for this "label" (the <label> element would probably not be suitable).


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
  •