Question

我是新来的，我从阵列中生成了5张图片。现在我想选择那些使用复选框选择的图像（意味着我可以根据选择选择1个图像或2个图像或更多）。选择后我想将其名称显示为您已选择这些图像的警报。请指导我，因为我是javascript的新手。提前谢谢。

Answer 1

这是有效的JsFiddle。

您可以尝试此功能，它会绑定一个复选框到图像：

function bind_checkbox_image(checkboxId, imageId)
{
    document.getElementById(checkboxId).onchange = function () {

        alert(document.getElementById(imageId).getAttribute("title"));
    };
}

图片应该有标题，复选框上的更改会显示标题：

<img id="myimage" title="the image text" src="..." />
<input type="checkbox" id="mycheckbox" />

您现在可以绑定它们：

bind_checkbox_image("mycheckbox", "myimage");

编辑：复选框和图像的错误修正反转ID

Answer 2

目前还不完全清楚可接受的输出是什么，但这里有积累所选照片并显示所选照片的图像src的内容。

var PhotoSrcArray = [
   "http://placekitten.com/g/60/60",
   "http://placekitten.com/70/60",
   "http://placekitten.com/g/60/70",
   "http://placekitten.com/70/70",
   "http://placekitten.com/g/80/80"
];

for(var i = 0; i < PhotoSrcArray.length; i++){
    $("#imgs").append('<li><label><input type="checkbox"></input><img src="'+PhotoSrcArray[i] + '" data-index="'+(i+1).toString() + '"/></label></li>');
}

var myArray = [];

$("li input").change(function(event){
    if (this.checked){
       myArray.push($(event.currentTarget).next('img').attr('data-index')); 
    }
    else {
       var indexOfPhoto = myArray.indexOf($(event.currentTarget).next('img').attr('data-index'));
       if (indexOfPhoto > -1){
            myArray.splice(indexOfPhoto, 1);
       }
    }
    myArray.sort();
    $("#output").html( myArray.join(' '));
    //or alert it if you'ld like
});

这是working fiddle here。

根据选择选择图像，并在javascript中将其名称显示为警报

2 个答案: