How can I add values to a div based on the checked values in a list?

ok, , , Before I try and step you through my code progression, I will tell some about what your question had me consider. First you have "Products" to choose by checks, and u want a button to show what was checked and a price to buy the list. I immediately thought of the online shopping CART to hold the products picked, their serial number, their quantity, and their price per item. Since for these there is no quantity , serial number, and all have the same price, I made a cart Array, that only had ONE element per ITEM, the description, from some element beside the check-box., since all items were the same price, I just just added an item to the cart (a string from a span),  IF the check was CHECKED, by this if test -    if(cks[c].checked)    - in this line -
         if(cks[c].checked) { cart.push(sns[c].innerHTML.substr(0, 23)); }
so the cart will have the number of  PDF ordered, so if the cart had 2 PDF in it, the cost wound be 20 bucks.

Now to my code, you ask - " But what's "id2ob?" " - I detest writing the long    document.getElementByID( )   over and over again in code, so I include a "Short Code Write" function at first -
         function   id2ob    (elmtID) { return document.getElementById(elmtID); }
this function HAS NO functioning except to save me much time in long code writes, so I can write -
    var a = id2ob("avail1");
instead of
    var a = document.getElementById("avail1");

Now, , I write alot of code all day long, so I have my code writing habits, and in javascript I use short-code syntax writing, I was not thinking when I wrote this code here, and just pounded it out as I usually do, so I shortened a code to

        id2ob("avail1").getElementsByTag name("button")[0].onclick=function() {}

I will do a break down into long code here -

// need to get the button container <p id="avail1">  first
  var buttonContainer = document.getElementById("avail1");
// now get an array with all of the "button" tags in it
  var buttons = buttonContainer.getElementsByTag name("button");
// since buttons is an Array and I just need ONE button I use the array [0] for onclick
  buttons[0].onclick = function() {
      this.innerHTML = "Clicked";
      }

Select all Open in new window

so that code for me is shortened -

// long code -
  var buttonContainer = document.getElementById("avail1");
  var buttons = buttonContainer.getElementsByTag name("button");
  buttons[0].onclick = function() {
      this.innerHTML = "Clicked";
      }


// short code -
  id2ob("avail1").getElementsByTagName("button")[0].onclick = function() { this.innerHTML = "Clicked"; }

Select all Open in new window

Next you ask -     What's "sns?"    - the sns is just a variable Name that I shorten spans to sns and is used in this code -
    var sns = id2ob("avail1").getElementsByTagName("span");

since I have exactly the same number of <span> in the container paragraph as I do <input>, then when I run a FOR LOOP for the checks  (inputs) I can use the same FOR LOOP runner var c in both the span and input -
      cks[c]     sns[c]

You ask -  "somehow add the titles to the "out1" variable, but I don't see how that's happening."

I use a FOR LOOP for the cart variable Array        for (c=0;c<cart.length;++c)        , and just ADD the cart string to the out1 string variable and place a line break <br /> as        out1 += cart[c]+"<br />";         to make a list -
     for (c=0;c<cart.length;++c) out1 +=cart[c]+"<br />";

Like I said, I just used my own code write conventions, and I know from others commenets that this way may not be understandable to many.

I hope this helps you, but I know that many now use Jquery or Prototype javascript libraries, and don't bother to learn much raw javascript.