How to save img src and span text from child div if checkbox is checked with javascript?

Question

How do I save IMG src and span text from a child div using Javascript? The data should be saved in two global variabels.

Look at my html/javascript code here http://jsfiddle.net/8LW6Q/7/

<div class="parentBox">
<img id="img_1" src="pic1.png" alt="Small pic" class="notChecked">

  <div class="childBox">
<img src="pic1.png" alt="Bigger pic">
 <input type="checkbox" data-img="img_1" onclick="javascript:funCalled(this)"/><span>Sample picture</span>  
    </div>
</div>


<div class="parentBox">
<img id="img_2" src="pic2.png" alt="Small pic" class="notChecked">

<div class="childBox">
            <img src="pic2.png" alt="Bigger pic">
  <input type="checkbox" data-img="img_2"  onclick="javascript:funCalled(this)"/><span>Sample picture</span>    
    </div>
</div>  

The IMG src in and span tag in childBox should be saved in the global variable imgSrc and imgSpan if the checkbox is checked.

I guess I need a for loop to collect the information from the childBoxes but I have no idea how to get in every childBox to collect it (if it checked). No Jquery.

The function funCalled can be untouched. I want a new function that actives when I push a button.

<input type="button" value="show selected pics" onclick="function"/>

Look at the Jfiddle for html and javascript code.

Hope someone can help me.

Answer 1

I think I have what you are looking for, but not sure how you wanted the data stored in the arrays, so you might have to change that up a bit.

JS

function funCalled(obj) {
    var el = document.getElementById(obj.getAttribute('data-img'));
    if (obj.checked) {
        imgSrc.push({
            id: el.id,
            src: el.src
        });
        imgSpan.push({
            id: el.id,
            text: document.querySelector('[data-img="' + el.id + '"] + span').innerHTML
        });
        el.className = "checked";
    } else {
        imgSrc = imgSrc.filter(function (val) {
            return val.id !== el.id;
        });
        imgSpan = imgSpan.filter(function (val) {
            return val.id !== el.id;
        });
        el.className = "notChecked";
    }
}

Updated JSFiddle: http://jsfiddle.net/wyze/8LW6Q/11/

Answer 2

OK, try this DEMO :

var imgObj = {};
function funCalled(obj) {
var el = document.getElementById(obj.getAttribute('data-img'));
if (obj.checked) {
  el.className = "checked"; 
} else {
  el.className = "notChecked";
  }
 }

function addMe(obj){
var el = document.getElementById(obj.getAttribute('data-img'));

imgObj[el.id]= imgObj[el.id] || {};
imgObj[el.id].imgSrc = imgObj[el.id].imgSrc || [];
imgObj[el.id].imgSpan = imgObj[el.id].imgSpan || [];

var parent = el.parentNode.getElementsByClassName('childBox')[0],
 imgSRC = parent.getElementsByTagName('img')[0].src,
 spanTXT = parent.getElementsByTagName('span')[0].innerHTML;

if (obj.checked) {
    imgObj[el.id].imgSrc.push(imgSRC);
    imgObj[el.id].imgSpan.push(spanTXT);
 } else {
    var imgIx = imgObj[el.id].imgSrc.indexOf(imgSRC),
        spanIx = imgObj[el.id].imgSpan.indexOf(spanTXT);
        imgObj[el.id].imgSrc.splice(imgIx);
        imgObj[el.id].imgSpan.splice(spanIx);
    }

console.log(imgObj, imgObj[el.id].imgSrc, imgObj[el.id].imgSpan);
}