チェックボックスのOnとOffを2つの画像にするには

解決済

質問者：level2012
質問日時：2009/08/25 16:59
回答数：3件

チェックボックスのOnとOffを2つの画像にして、POSTで通常通り
値を取得できる方法を教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2009/08/26 13:38

#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>

- 0
- 件

通報する

この回答へのお礼

完全なソースコードありがとうございます。
久しぶりに感動しました。
こんなにスマートに書けるんですね。
勉強させていただきます。

通報する

お礼日時：2009/08/26 14:23

No.2

回答者： kyotokyo
回答日時：2009/08/26 00:18

JSで作ってやるのが早いと思います。

http://www.kttnet.co.jp/~harashi/samplepg/check/ …
このサイトのソースをみると
やはり同じような処理ですね。
かなりソースが長くなるようですが・・・

この回答への補足

参考のサイトのソースにCheckBoxの記述がありませんが、
通常通りPOSTで値を取得できるのでしょうか？

補足日時：2009/08/26 10:11

通報する

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2009/08/25 17:43

画像を使うチェックボックスはUI用としてスクリプトで制御するものとして、実際のチェックボックスは非表示にしておく。

ユーザの操作に応じて、スクリプトで画像を変更するでしょうから、それと同時に非表示の（本物の）チェックボックスの値も設定しておく。

で、できそうな気がしますが・・・
送信時には、通常の（＝非表示の）チェックボックスの値が送られることになります。

なお、スクリプトOFFの場合も考慮するなら、非表示のチェックボックスは初期状態では表示にしておいて、スクリプトで画像チェックボックスと表示状態を入れ替えるようにするのがよろしいかと思います。