- 締切済み
checkboxを画像に置き換える方法
チェックボックスで、チェック前とチェック後の2つの画像を用意して、チェックボックスをその画像に置き換える方法を教えてください。
- level2012
- お礼率58% (24/41)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
簡略版です。 <html> <head> <script type="text/javascript"> window.onload = function(){ img1 = 'off.gif', img2 = 'on.gif'; var i, e = document.getElementsByTagName('span'); for (i=0; i<e.length; i++) if (e[i].className=='toggleImage') e[i].onclick = setImage(); } function setImage() { var flg = false; return function() { flg = !flg; var img = this.getElementsByTagName('img'); if (img.length) img[0].src = flg?img2:img1; }; } </script> </head> <body> <span class="toggleImage"> <img src="off.gif" alt="">チェックボックス1 </span> <p> <span class="toggleImage"> <img src="off.gif" alt="">チェックボックス2 </span> <p> <span class="toggleImage"> <img src="off.gif" alt="">チェックボックス3 </span> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
ていせいします。ちゃんと<span>をとじてなかった。 <p> <span class="checkbox"> <img src="chk0.gif" alt="チェック前"> <img src="chk1.gif" alt="チェック後" class="hide"> <input type="hidden" name="abc" value="off"> </span> Q1：どっち？ </p> <p> <span class="checkbox"> <img src="chk0.gif" alt="チェック前"> <img src="chk1.gif" alt="チェック後" class="hide"> <input type="hidden" name="abc" value="off"> </span> Q2:どっち？ </p>
- babu_baboo
- ベストアンサー率51% (268/525)
ちょっと、じゅんじょのせいやくと、classをcheckboxにきめうちするのはまずいかなぁ？ ばぶぅ～。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <style type="text/css"> .hide { display:none; } </style> <p> <span class="checkbox"> <img src="chk0.gif" alt="チェック前"> <img src="chk1.gif" alt="チェック後" class="hide"> <input type="hidden" name="abc" value="off"> Q1：どっち？ </p> <p> <span class="checkbox"> <img src="chk0.gif" alt="チェック前"> <img src="chk1.gif" alt="チェック後" class="hide"> <input type="hidden" name="abc" value="off"> Q2:どっち？ </p> <script type="text/javascript"> //@cc_on document./*@if (@_jscript) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'click', function (evt) { var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; var p = getParent(e, 'className', 'checkbox'); var o; if (p) { o = p.getElementsByTagName('*'); if ('inline' === getCStyle(o[0], 'display')) { o[0].style.display ='none'; o[1].style.display ='inline'; o[2].value = 'on'; } else { o[0].style.display ='inline'; o[1].style.display ='none'; o[2].value = 'off'; } } }, false); function getParent (node, type, val) { return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function getCStyle( e, s ) { return e.nodeType == 1 ? /*@if(@_jscript) e.currentStyle[ s ] @else@*/ document.defaultView.getComputedStyle( e, null )[ s ] /*@end@*/ : null; } </script>
