如果使用JavaScript選中了復選框，如何保存img src並從子div跨文本？

Question

如何使用Javascript保存IMG src並從子div跨文本？ 數據應保存在兩個全局變量中。

在這里查看我的html / javascript代碼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>  

如果選中了復選框，則childBox中的IMG src in和span標簽應保存在全局變量imgSrc和imgSpan中。

我想我需要一個for循環來從childBox收集信息，但是我不知道如何進入每個childBox來收集它（如果選中）。 沒有Jquery。

函數funCalled可以保持不變。 我想要一個新功能，當我按下按鈕時會激活。

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

在Jfiddle中查看html和javascript代碼。

希望可以有人幫幫我。

Answer 1

我想我有您要尋找的東西，但是不確定您要如何將數據存儲在數組中，因此您可能需要稍作修改。

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";
    }
}

更新的JSFiddle： http : //jsfiddle.net/wyze/8LW6Q/11/

Answer 2

OK，試試這個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);
}