- ベストアンサー
複数あるチェックボックスからひとつだけ選択
よろしくお願いします。 複数あるチェックボックスから常にひとつだけしか選択できないように したく、色々調べてみたところ、下記のようなスクリプトを見つけました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>sample</title> <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('radiolike'); for (var i = 0; i < chks.length; i++) { if (chks[i] != tgt) chks[i].checked = false; } } before = tgt; } </script> </head> <body> <form id="SAMPLE" action="#" onclick="test(event);"> <label for="c1"><input name="radiolike" id="c1" type="checkbox" value="0">Item1</label> <label for="c2"><input name="radiolike" id="c2" type="checkbox" value="1">Item2</label> <label for="c3"><input name="radiolike" id="c3" type="checkbox" value="2">Item3</label> </form> </body> </html> 上記のチェックボックス群を同ページに複数置きたいときは、どのよう にスクリプトを変えたらよいのか分からずとても困っております。 分かりづらい説明で誠に申し訳ありません。 補足説明致しますので、どうかご教授下さいますようお願い致します。
- patsaysnow
- お礼率77% (89/115)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
No.4です。 > お教え頂いたスクリプトはSAMPLE1とSAMPLE2でそれぞれに<form>タグがあるのですが、これをFORMタグひとつで動作させることはできるものなのでしょうか？ 可能です。 今回のプログラムは、nameが同じ値の<input>タグのチェックボックスが、2つ以上チェックされないように動作するものです。 ですので、この<input>タグのnameを、うまく変えてあげれば、思い通りの動作になるはずです。
その他の回答 (4)
- LegaC2
- ベストアンサー率52% (224/428)
今のプログラムを少し変更して実現すると以下のような感じになります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "?http://www.w3.org/TR/html4/loose.dtd">? <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>sample</title> <script type="text/javascript"> var before = null; function test(e, suffix) { var tgt = e.srcElement ? e.srcElement: e.target; if (before == tgt && tgt.checkd == true) { tgt.checked = true; } else { var chks = document.getElementsByName('radiolike' + suffix); for (var i = 0; i < chks.length; i++) { if (chks[i] != tgt) chks[i].checked = false; } } before = tgt; } </script> </head> <body> <form id="SAMPLE1" action="#" onclick="test(event, '1');"> <label for="a1"><input name="radiolike1" id="a1" type="checkbox" value="0">Item11</label> <label for="a2"><input name="radiolike1" id="a2" type="checkbox" value="1">Item12</label> <label for="a3"><input name="radiolike1" id="a3" type="checkbox" value="2">Item13</label> </form> <body> <form id="SAMPLE2" action="#" onclick="test(event, '2');"> <label for="c1"><input name="radiolike2" id="c1" type="checkbox" value="0">Item21</label> <label for="c2"><input name="radiolike2" id="c2" type="checkbox" value="1">Item22</label> <label for="c3"><input name="radiolike2" id="c3" type="checkbox" value="2">Item23</label> </form> </body> </html>
補足
早速ご回答頂き誠にありがとうございます。 お教え頂いたスクリプトで無事複数のチェックボックス群を同ページに 置く事ができました。ありがとうございます。 チェックボックス郡を配置したいページはCGIを使用したメールフォームでして、 <form>～</form>タグの間にお教え頂いたスクリプトを置きたいと思っています。 お教え頂いたスクリプトはSAMPLE1とSAMPLE2でそれぞれに<form>タグがあ るのですが、これをFORMタグひとつで動作させることはできるものなのでしょうか？ もし差し支えなければ、お教え頂けると幸いです。 よろしくお願い致します。 イメージしているスクリプトです。 <form id="sample" action="./mail.cgi" onclick="test(event, '1');" onSubmit="return Check(this)"> <label for="a1"><input name="radiolike1" id="a1" type="checkbox" value="0">Item11</label> <label for="a2"><input name="radiolike1" id="a2" type="checkbox" value="1">Item12</label> <label for="a3"><input name="radiolike1" id="a3" type="checkbox" value="2">Item13</label> <label for="c1"><input name="radiolike2" id="c1" type="checkbox" value="0">Item21</label> <label for="c2"><input name="radiolike2" id="c2" type="checkbox" value="1">Item22</label> <label for="c3"><input name="radiolike2" id="c3" type="checkbox" value="2">Item23</label> ※submit用のタグです <input type="image" src="img/btn.gif"> </form>
- yambejp
- ベストアンサー率51% (3827/7415)
ラジオボタンはチェックが外せないからいやだということかな？ こんなかんじで・・・ <script> function test(obj) { var f=obj.form; for(var i=0;i<f.length;i++ ){ if(f[i].type=="checkbox" && f[i]!=obj) f[i].checked=false; } } </script> <form id="SAMPLE" action="#"> <label for="c1"><input name="radiolike" id="c1" type="checkbox" value="0" onclick="test(this)">Item1</label> <label for="c2"><input name="radiolike" id="c2" type="checkbox" value="1" onclick="test(this)">Item2</label> <label for="c3"><input name="radiolike" id="c3" type="checkbox" value="2" onclick="test(this)">Item3</label> </form>
お礼
早速ご回答頂きありがとうございました。 実現したいのは、ANo.4でお答え頂いた内容でした。 私の説明不足でご迷惑をおかけ致しました。誠に申し訳ありません。 お教え頂いたスクリプトは私が見つけたスクリプトとはまた違うよ うなので、こちらのスクリプトも参考にさせて頂きたいと思います。 ありがとうございます。
- HIRSYU
- ベストアンサー率51% (45/87)
>複数あるチェックボックスから常にひとつだけしか選択できないように ラジオボタンじゃだめですか？
お礼
早速ご回答頂き誠にありがとうございます。 そうですね。 本来のチェックボックスの使い方ではないので、ラジオボタン の使用も考慮させて頂きたいと思います。ありがとうございました。
- kura07
- ベストアンサー率50% (30/59)
チェックボックスは本来複数選択するものです。 ひとつだけしか選択しないんでしたら、ラジオボタンを使ってみては？？ <form name="SAMPLE"> <input type="radio" name="radiolike" value="0">Item1<br> <input type="radio" name="radiolike" value="1">Item2<br> <input type="radio" name="radiolike" value="2">Item3<br> </form> これだと、JavaScriptがいりませんね＾＾
お礼
早速ご回答頂き誠にありがとうございます。 そうですね。 本来のチェックボックスの使い方ではないので、ラジオボタン の使用も考慮させて頂きたいと思います。 ありがとうございました。
お礼
ご回答頂きありがとうございました。 その後、色々と試してみて、無事動作させることができました。 最後までお付き合い頂き、誠にありがとうございました。