如果使用javascript选中复选框，如何从子div保存img src和span文本？

如何使用Javascript保存子div中的imgsrc和span文本？数据应保存在两个全局变量中

请看我的html/javascript代码

样图
样图

如果选中该复选框，则IMG src in和span tag in childBox应保存在全局变量imgSrc和imgSpan中

我想我需要一个for循环来从childBox收集信息，但我不知道如何进入每个childBox来收集信息（如果选中）。没有Jquery

函数可以是非接触函数。我想要一个新的功能，当我按下按钮时激活

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

查看Jfiddle中的html和javascript代码

---

希望有人能帮助我

我想我有你想要的东西，但不确定你想要如何将数据存储在数组中，所以你可能需要稍微改变一下

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

更新的JSFIDLE:

好的，试试这个：

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

---

检查下面我的答案。还有一个问题，如果取消选中，是否要将其从阵列中删除？是，则应将其从阵列中删除。非常感谢你的帮助！！谢谢你的回答。有可能在两个函数中得到它吗？所以被调用的函数是未被触及的。所以当我点击一个按钮时，img src和img span会收集？看看我在原帖中的编辑，你是什么意思？如果不是从funCalled调用，您是否会调用func进行收集？funCalled函数仅用于更改parentDiv的类。但我可能会从HTML的输入按钮调用它，并在新窗口中显示选定的图片和span标记，例如？你明白吗？：）谢谢，我已经更新了我的答案。让我知道这对你有用吗？

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