htmlマルチセレクション画像

16個のアイコン（小さな画像）を画面に印刷しました。htmlマルチセレクション画像

今、アイコンを選択できます。ボタンを押すと、選択したアイコンIDがフォームに送信されます。

ネットではチェックボックスとマルチセレクションのリストしか見ていませんでしたが、これを行う最も良い方法は何ですか？

（私はウェブデザインにはかなり新しいです）

ありがとうございます！

2011-07-23 Blank6

を試してみてください。私はjQueryバージョンを好んでいます。なぜなら、インラインのonclickハンドラを使用するのではなく、クリックハンドラをマークアップから分離するからです。

これは要素の名前に[]を追加して作成できる要素配列inputを使用しています。同じテクニックは、SELECTと他の要素で使用できます。なぜなら、単一のキーで知られている値ではなく、配列が送信されたことをサーバーに通知するからです。 jQueryのは、あなたのタグではありませんが

<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は内部的に多くの非互換性を処理するので、実際にはjQueryを使用して、ブラウザ間で互換性があり、独自のカスタムJSを作成する方が簡単です。 –

これは単なるJavaScriptや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

、あなたはintroduce yourself to jQuery必要があります。あなたの人生を楽にしてくれるようにしようとしています。あなただけのJavascriptをjQueryのを使用すると、使用している場合ならばここで基本的な手順は、両方です：jQueryの

で

は、すべてのアイコンにクラスとそれぞれ一意のIDを与える：

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

次にクリックイベントに、そのクラスをバインド

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

フォームがonsubmitに機能を提出取り付け：

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

ビルドsubmitForm機能：Javascriptの上記のように似ていますが、方法がより複雑

で

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

...

クラスは、このスレッドを見切り替えるには：クラスによって取得属性に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マルチセレクション画像

答えて

関連する問題