複数あるチェックボックスからひとつだけ選択

解決済

質問者：patsaysnow
質問日時：2008/10/17 23:56
回答数：5件

よろしくお願いします。

複数あるチェックボックスから常にひとつだけしか選択できないように
したく、色々調べてみたところ、下記のようなスクリプトを見つけました。

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

上記のチェックボックス群を同ページに複数置きたいときは、どのよう
にスクリプトを変えたらよいのか分からずとても困っております。

分かりづらい説明で誠に申し訳ありません。
補足説明致しますので、どうかご教授下さいますようお願い致します。

通報する

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

質問の本文を隠す

回答 (5件)

No.1

回答者： kura07
回答日時：2008/10/18 00:07

チェックボックスは本来複数選択するものです。

ひとつだけしか選択しないんでしたら、ラジオボタンを使ってみては？？

<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がいりませんね＾＾

参考URL：http://www.tagindex.com/html_tag/form/input_radi …

- 0
- 件

通報する

この回答へのお礼

早速ご回答頂き誠にありがとうございます。

そうですね。
本来のチェックボックスの使い方ではないので、ラジオボタン
の使用も考慮させて頂きたいと思います。
ありがとうございました。

通報する

お礼日時：2008/10/18 00:55

No.2

回答者： HIRSYU
回答日時：2008/10/18 00:07

>複数あるチェックボックスから常にひとつだけしか選択できないように

ラジオボタンじゃだめですか？

- 0
- 件

通報する

この回答へのお礼

通報する

お礼日時：2008/10/18 01:25

No.3

回答者： yambejp
回答日時：2008/10/18 00:09

ラジオボタンはチェックが外せないからいやだということかな？

こんなかんじで・・・

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

- 0
- 件

通報する

この回答へのお礼

早速ご回答頂きありがとうございました。
実現したいのは、ANo.4でお答え頂いた内容でした。
私の説明不足でご迷惑をおかけ致しました。誠に申し訳ありません。

お教え頂いたスクリプトは私が見つけたスクリプトとはまた違うよ
うなので、こちらのスクリプトも参考にさせて頂きたいと思います。
ありがとうございます。

通報する

お礼日時：2008/10/18 01:33

No.4

回答者： LegaC2
回答日時：2008/10/18 00:16

今のプログラムを少し変更して実現すると以下のような感じになります。

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

補足日時：2008/10/18 01:20

通報する

- 0
- 件

通報する

No.5ベストアンサー

回答者： LegaC2
回答日時：2008/10/19 22:12

No.4です。

> お教え頂いたスクリプトはSAMPLE1とSAMPLE2でそれぞれに<form>タグがあるのですが、これをFORMタグひとつで動作させることはできるものなのでしょうか？

可能です。

今回のプログラムは、nameが同じ値の<input>タグのチェックボックスが、2つ以上チェックされないように動作するものです。

ですので、この<input>タグのnameを、うまく変えてあげれば、思い通りの動作になるはずです。