- 締切済み
チェックを入れて文字を表示する
javascript初心者です。あつかましい質問で申し訳ありません。 他のページのサンプルを参考にしてチェックを入れた時はにチェックを入れると文字が表示されるチェックボックスを作成しました。更にチェックはひとつしか出来ないというjavascriptも拾ってきて組み合わせたのですが、チェックを付けてとなりにチェックを入れた時はじめに表示された文字が消えません。教えてください。 <script type="text/javascript"> var before = null; function test(e) { var tgt = e.srcElement ? e.srcElement: e.target; if (before == tgt && tgt.checkd == true) { tgt.checked = true; } else { var chks = document.getElementsByName('chkgroup'); for (var i = 0; i < chks.length; i++) { if (chks[i] != tgt) chks[i].checked = false; } } before = tgt; } <!-- function output(){ var str=""; var chkboxes=document.getElementsByName("chkgroup"); for(var i=0;i<chkboxes.length;i++){ var obj=chkboxes[i]; if (obj.checked){//チェックされていたらstrにvalue属性の文字列を追加する str+=obj.value; } } document.getElementById("result").innerHTML=str; } window.onload=function(){ var chkboxes=document.getElementsByName("chkgroup");//チェックボックス(chkgroup)を配 列で取得 for(var i=0;i<chkboxes.length;i++){//ループでチェックボックス全てにイベントハンドラを 設定 chkboxes[i].onclick=output; } }; //--> </script> <title>sample</title> <body> <form id="SAMPLE" action="#" onclick="test(event);"> <label for="chk1"><input name="chkgroup" id="chk1" type="checkbox" value="0">Item1</label> <label for="chk2"><input name="chkgroup" id="chk2" type="checkbox" value="1">Item2</label> <label for="chk3"><input name="chkgroup" id="chk3" type="checkbox" value="2">Item3</label> </form> <p id="result">ここに表示されます。</p> </body>
- ai0908
- お礼率20% (1/5)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
チェックボックスは本来は複数チェック可能な仕組みになっています。 イベント時に（スクリプトで）クリアする前にチェックされている内容を拾うと、複数の内容を記録します。 ＞更にチェックはひとつしか出来ないというjavascriptも拾ってきて チェックを一つに限定するならラジオボタンを使った方が、ユーザが理解しやすいはず。 チェックボックスにそのような機能をつけると、ユーザの期待に反する動作になりませんか？ また、ラジオボタンにした方がスクリプトも簡単になるかと… （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> window.onload = function(){ document.getElementById("SAMPLE").onclick = function(evt){ evt = evt || window.event; var t = evt.target || evt.srcElement; if(t.nodeName=="INPUT" && t.type=="radio") document.getElementById("result").innerHTML = t.value; } } </script> </head> <body> <form id="SAMPLE" action="#"> <label for="chk1"> <input name="chkgroup" id="chk1" type="radio" value="0">Item1 </label> <label for="chk2"> <input name="chkgroup" id="chk2" type="radio" value="1">Item2 </label> <label for="chk3"> <input name="chkgroup" id="chk3" type="radio" value="2">Item3 </label> </form> <p id="result">ここに表示されます。</p> </body> </html>
