- ベストアンサー
チェックボックスのOnとOffを2つの画像にするには
チェックボックスのOnとOffを2つの画像にして、POSTで通常通り 値を取得できる方法を教えてください。
- level2012
- お礼率58% (24/41)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 例えばこんな感じ？ class="imgbox"を設定してある、inputとその後にあるimgが対になっているものとしています。（あまり厳密にチェックしていませんので、このルール以外で設置すると対応関係がおかしくなります） 画像はbtn1.gif、btn2.gifがチェックのon、offの画像と仮定。 <html> <head> <style type="text/css"> form input.imgbox { display:inline; } form img.imgbox { display:none; } </style> <script type="text/javascript"> window.onload = function(){ elm = document.getElementsByTagName('IMG'); for (i=0; i<elm.length; i++) if (checkcls(elm[i])) set(elm[i]); } function set(e, f) { var tmp = e.previousSibling; while (tmp && tmp.nodeName!='INPUT') tmp = tmp.previousSibling; if (tmp && tmp.type == 'checkbox' && checkcls(tmp)) { if (f) tmp.checked = !tmp.checked; tmp.style.display = 'none'; e.style.display = 'inline'; e.src = tmp.checked?'btn1.gif':'btn2.gif'; } } function checkcls(e){ var k = -1, cls = e.className.split(' '); while (cls[++k]) if (cls[k]=='imgbox') return true; return false; } </script> </head> <body> <form action="" method=""> <input type="checkbox" name="cbx1" class="imgbox"> <img src="" class="imgbox" onclick="set(this,1);">チェックボックス1 <br> <input type="checkbox" name="cbx2" class="imgbox"> <img src="" class="imgbox" onclick="set(this,1);">チェックボックス2 <br> <input type="submit" value="送信"> </form> </body> </html>
その他の回答 (2)
- kyotokyo
- ベストアンサー率35% (27/77)
JSで作ってやるのが早いと思います。 http://www.kttnet.co.jp/~harashi/samplepg/check/check.htm このサイトのソースをみると やはり同じような処理ですね。 かなりソースが長くなるようですが・・・
補足
参考のサイトのソースにCheckBoxの記述がありませんが、 通常通りPOSTで値を取得できるのでしょうか？
- fujillin
- ベストアンサー率61% (1594/2576)
画像を使うチェックボックスはUI用としてスクリプトで制御するものとして、実際のチェックボックスは非表示にしておく。 ユーザの操作に応じて、スクリプトで画像を変更するでしょうから、それと同時に非表示の（本物の）チェックボックスの値も設定しておく。 で、できそうな気がしますが・・・ 送信時には、通常の（＝非表示の）チェックボックスの値が送られることになります。 なお、スクリプトOFFの場合も考慮するなら、非表示のチェックボックスは初期状態では表示にしておいて、スクリプトで画像チェックボックスと表示状態を入れ替えるようにするのがよろしいかと思います。
お礼
fujillinさんコメントありがとうございます。 やはり一筋縄でいかないようですね。
お礼
完全なソースコードありがとうございます。 久しぶりに感動しました。 こんなにスマートに書けるんですね。 勉強させていただきます。