Question

我在屏幕上打印了16个图标（小图片）。

现在我希望能够选择图标，当我按下按钮时，所选的图标ID将以表格形式发送。

我在网上只看到了复选框并列出了多选，什么是最好的方法呢？

（我对网页设计很陌生）

非常感谢！

Answer 1

这可能只是使用简单的Javascript或jQuery。我更喜欢jQuery版本，因为它将click处理程序与标记分开，而不是使用内联onclick处理程序，这通常是不鼓励的。

这样做是使用input元素数组，您可以通过将[]添加到元素名称来创建。可以在SELECT和其他元素上使用相同的技术，因为它向服务器发出已提交数组的信号，而不是单个键已知的值。

<html>
<head>
<style type="text/css">
div img {
    cursor: pointer;
    border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
    if (id != '' && !document.getElementById('input_'+id)) {
        var img = document.createElement('input');
        img.type = 'text';
        img.id = 'input_'+id;
        img.name = 'images[]';
        img.value = id;

        document.imageSubmit.appendChild(img);
    }
}
$(document).ready(function(){
    $('#jqueryimages img').click(function(){
        setFormImage(this.id);
    });
});
</script>
</head>
<body>
<pre><?php 

if (count($_GET['images'])) {
    print_r($_GET['images']);
}

?></pre>
<div style="float: left; width: 49%;">
    <h1>Plain ol' HTML</h1>
    1. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-1" onclick="setFormImage(this.id)"/>
    <br/>
    2. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-2" onclick="setFormImage(this.id)"/>
    <br/>
    3. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-3" onclick="setFormImage(this.id)"/>
    <br/>
    4. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-4" onclick="setFormImage(this.id)"/>
</div>
<div id="jqueryimages" style="float: left; width: 49%;">
    <h1>jQuery</h1>
    5. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-5"/>
    <br/>
    6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-6"/>
    <br/>
    7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-7"/>
    <br/>
    8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-8"/>
</div>
<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
    <input type="submit" value="View Selected"/>
</form>
</body>
</html>

http://jfcoder.com/test/selectimg.php

Answer 2

虽然jQuery不在您的代码中，但您应该introduce yourself to jQuery。对于你想要做的事情，它会让你的生活更轻松。如果您使用jQuery并且仅使用Javascript：

，这是基本步骤

使用jQuery

为您的所有图标添加一个类，每个图标都是唯一的ID：

<img src='icon1.png' data-iconID=2233 class='myIcons' />）。

然后将该类绑定到单击事件

$('.myIcons').bind('click', function() { $(this).toggleClass('selectIcon'); });

将表单提交功能附加到onsubmit：

<form ... onsubmit="submitForm();">

构建submitForm函数：

   function submitForm() {
    var csvIconIds = '';
    $.each($('.myIcons.selectIcon'), function (index, value) {
        csvIconIds += $(value).attr('data-iconID');
    });
    //submit scvIconIds here along with other form data (ajax?)
   }

使用Javascript

与上述类似但方式更复杂......

要切换课程，请参阅此主题：How to add/remove a class in JavaScript?
要按类获取属性，请参阅此网站：http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/

Answer 3

试试这个

var idArray = [];
$("#container-id img").each(function(index,value){
idArray.push($(value).attr("id"));
});
//do anything with the array

html多选图像

3 个答案: