html multiselect圖像

我在屏幕上打印了16個圖標（小圖片）。html multiselect圖像

現在我希望能夠選擇圖標，當我按下按鈕時，選定的圖標ID將以一種形式發送。

我在網上只看到複選框並列出多選，這樣做的最好方法是什麼？

（我很新的網頁設計）

謝謝！

來源

2011-07-23 Blank6

這可能是隻使用普通的JavaScript或jQuery的一種方式。我更喜歡jQuery版本，因爲它將點擊處理程序從標記中分離出來，而不是使用內聯的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

來源

2011-07-23 21:32:54

非常感謝！這對我理解網頁設計的方式非常有幫助 – Blank6

我可以使用jQuery而不用擔心它在某些瀏覽器中無法使用嗎？ – Blank6

是的。 jQuery支持所有瀏覽器。實際上，使用jQuery並且跨瀏覽器兼容要比創建自己的定製JS容易得多，因爲jQuery在內部處理許多不兼容問題。 –

試試這個

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

來源

2011-07-23 21:22:59

雖然jQuery是不是在你的標籤，你應該introduce yourself to jQuery。它會讓你的生活變得更輕鬆，爲了你想要做的事情。下面是基本步驟都，如果你使用jQuery，如果使用只使用Javascript：

使用jQuery

給你所有的圖標類，每一個獨特的ID：

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

則該類綁定到click事件

$('.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/

來源

2011-07-24 01:07:32 Kyle

非常感謝！我進入網站並開始閱讀，看起來像jQuery將非常有幫助 – Blank6

完全！祝你好運 – Kyle

html multiselect圖像

回答

相關問題