人に聞けない痔の悩み、これでスッキリ >>

よろしくお願いします。

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (5件)

No.4です。



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

可能です。

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

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

ご回答頂きありがとうございました。
その後、色々と試してみて、無事動作させることができました。
最後までお付き合い頂き、誠にありがとうございました。

お礼日時:2008/10/21 19:47

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



<!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
    • good
    • 0

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


こんなかんじで・・・

<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>
    • good
    • 0
この回答へのお礼

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

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

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

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


ラジオボタンじゃだめですか?
    • good
    • 0
この回答へのお礼

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

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

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

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


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

<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 …
    • good
    • 0
この回答へのお礼

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

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

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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qチェックボックスの択一選択方法教えてください。

osはwindows98 officeはxpです。
ワード文書内にチェックボックスが3つあるとします。
今は、3つ全部にチェックを入れる事ができてしまいます。。。。3つのチェックボックスのうち一つしかチェックが入らないようにするにはどうしたら良いのでしょうか?(例えば、1にチェックが入っていて、2にチェックを入れると、1のチェックが消え、2だけにチェックがはいるようにしたいのです)どなたかご存知の方、ぜひ教えてください。お願いします。

Aベストアンサー

こんにちは、s_yoshi_6です。先ほどはどうも。

もしも、ラジオボタン(丸いボタン。Wordではオプションボタンと言ってます)でよければ、「フォーム」ツールバーではなくて、「コントロールツールボックス」ツールバーの中にあります。

挿入したい所にカーソルを置いて、「オプションボタン」のボタンをクリックすると挿入されます。
ただそのままだと、挿入したオプションボタン全てで択一になりますので、もし例えば三択が複数ある場合などは、挿入したボタンを右クリック→プロパティのGroupNameのところに適当なグループ名を記入します。このGroupNameが同じものの中で択一になります。なおボタン名は、ボタンを右クリック→オプションボタンオブジェクト→編集で変更できますので、不要であればそこで削除して下さい。

編集が終わったら最後に「コントロールツールボックス」ツールバー(または外に1つ小さくパレットが出ていると思いますが)の「デザインモードの終了」ボタン(三角定規に鉛筆)をクリックして下さい。

このボタンには色々機能を持たせることができるのですが、そのへんになるとちょっと分かりません。もしチェックをつけるだけでよければ、ちょっと試してみて下さい。

こんにちは、s_yoshi_6です。先ほどはどうも。

もしも、ラジオボタン(丸いボタン。Wordではオプションボタンと言ってます)でよければ、「フォーム」ツールバーではなくて、「コントロールツールボックス」ツールバーの中にあります。

挿入したい所にカーソルを置いて、「オプションボタン」のボタンをクリックすると挿入されます。
ただそのままだと、挿入したオプションボタン全てで択一になりますので、もし例えば三択が複数ある場合などは、挿入したボタンを右クリック→プロパティのGroupNameのところ...続きを読む

Qエクセルのチェックボックスで3つあるうち1つチェック入れたら自動的に残りにチェック出来ないようにするには

エクセルのチェックボックスで3つあるうち1つチェック入れたら自動的に残りにチェック出来ないようにするにはどうすればよいですか?今日始めてチェックボックスを触りました…

Aベストアンサー

チェックボックスにする必要あるのかな?
そうした、単一のものしか洗濯できないのであれば
ユーザインターフェースとしてはラジオボタン(オプションボタン)
の方が適切に思えるけれど・・・。

さて、質問の件ですが、チェックボックスのクリックイベントで
EnabledプロパティをFalseに設定するとチェックが出来なくなり
Trueにするとチェックが出来るようになります。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QJava-jspの画面入力値保持について

画面にテキスト、ラジオボタン、リストボックス とボタンがあります。
ボタンを押すと、JAVAで処理を行い、jspのviewで表示します。

1.テキスト、ラジオボタン、リストボックスなどに値が入力、設定されている状態で
ボタンを押して処理後にテキスト、ラジオボタン、リストボックスの値が
変わらないようにしたいのですが、
その場合、たとえば、入力、設定値をセッションになどに格納しておき
jspの所で、セッションから値を設定すると言うような方法になるのでしょうか?

2.ボタン押して処理後、ラジオボタン、リストボックスの選択値も
  変えないようにしたいのですが、
  これはどのように実現するのが、適切なのでしょうか?


以上、よろしくお願いします。

Aベストアンサー

ボタンというのはフォームのサブミットボタンのことですよ?
つまり、画面遷移が起きることを前提とすると(元の同じ画面に戻るのも含みます)

テキスト、ラジオボタン、リストボックスの状態を「要求パラメータ」として
送信し、それを次画面に反映するというのが最も一般的な方法です。

フレームワーク struts のアクションフォーム&JSPカスタムタグを使うと比較的楽に
そういう画面が作れますが、多くのフレームワークでも大差ありません。
簡単な画面なら素のサーブレート+JSPでも十分作れます。

セッションでもできますが、 セッションはログイン情報などの保持など、
限定された範囲で使うのが普通です。また、結局セッションに最新の
テキスト、ラジオボタン、リストボックスの状態を送るには、「要求パラメータ」
を送信する必要があります。

AJAXを使うという方法もあります。この場合、ボタンは AJAX 処理だけを行い
画面遷移を起こさないので、サーバ側で画面のテキスト、ラジオボタン、
リストボックスの状態をもつ必要はありません。

Qフォーム内checkboxのチェック可・不可の切替

お問い合わせフォームを作ろうと思っております。
その中で、一方のチェックボックスにチェックを入れると、別のチェックボックスが入力不可になるような動作のものをjavascriptにて作りたいのですが、どうも上手くいかずにおります。。

具体的には、下記のような内容のものを作ろうと思っています。
http://www.gazo.cc/up/19941.jpg

Q.1ですが、(1)、(2)それぞれの選択1・選択2は同時にチェックする事はできないようにしたいです。
ただし、『(1)の選択1・(2)の選択2』また『(1)の選択2、(2)の選択1』という組み合わせのチェックは可能です。

Q.2ですが、特に無しを選択すると、選択1、選択2、選択3はチェックする事はできないようにしたいです。
また可能でしたら、下にある、2箇所テキスト入力部分は、選択3が選択されないと入力不可の状態にしたいと思っています。


ご回答の程、よろしくお願い致します。

Aベストアンサー

チェックボックスにdisabledという属性を設定すれば入力不可にできるので、
onclickイベントで希望の処理をすればいいと思います。

とても簡単に書くと
<html>
<body>
<form name="f1">
選択1<input type="checkbox" name="chk1" onClick="document.f1.chk2.disabled = this.checked;">
選択2<input type="checkbox" name="chk2" onClick="document.f1.chk1.disabled = this.checked;">
</form>
</body>
</html>
としておけば、選択1をチェックしたら選択2は入力不可になります。

あくまでもサンプルですので、参考までに。

Qラジオボタンが両方とも選択できてしまう

画像を見てわかると思いますがなぜかラジオボタンを設置したら両方とも選択できてしまう状態になってしまいました。どのようにすれば改善できますか?


<input name="21" type="radio" value="1">男性
<input name="22" type="radio" value="2">女性

Aベストアンサー

同じnameをつけましょう

Qテキストボックスに数字しか入力できないようにするには?

タイトルの通りなのですが、あるテキストボックスに数字しか入力できないようにしたいのですが可能でしょうか?また、

「あいうえお 12345 「」:・、¥・」

というような文字列をコピーし、そのテキストボックスにペーストした際にも数字の12345だけが残るといった事も実現したいのですが…

どなたかご存知の方いらっしゃいましたら教えて頂けると幸いです。

Aベストアンサー

>英数字

では、こんな感じで

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9a-z]+/i,'')">

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

QonClickで関数呼出し後に、結果に応じてsubmitを実行する方法

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しません・・・
onClick部分にonClick="return func(),submit();"と記述した場合、
func関数の実行結果がtrueでもfalseでも遷移してしまいます。
そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、
func関数がtrueの時のみうまく遷移するようになりました。

これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか?
正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば
教えていただけないでしょうか?

※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと
考えております。

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しませ...続きを読む

Aベストアンサー

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右式を結果とする演算子です。よって、funcメソッド、submitメソッド両方を評価するため、funcメソッドの戻り値に関係なく、submitされます。

3.&&で区切った場合、
論理演算子「&&」は、左右ともにtrue(0以外)の場合のみtrueとする演算子です。また、2項論理演算子は左式から評価し、左式だけで全体の結果がわかる場合、右式を評価しません。よって、funcメソッドがfalseを戻した場合、その時点でsubmitを評価しなくても演算結果は必ずfalseとなるのでそこで打ち切られ、trueを戻した場合、submitを評価しないと演算結果を得られないため、遷移したわけです。「&&」を「||(論理和)」に変更すると逆の結果得たと思います。

さて、では3の「&&」が正しいかと言われたら、文法上は正しいです。ただし、他人がみてわかるとは思えません。
そこで、以下の記述はいかがでしょう。読んでみてソースを理解できますか。


<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="func()">
</FORM>

(中略)

// funcの定義
function func() {
 if (a==0) {
  alert("処理しない");
  return ;
 }
 document.FormName.submit();
}

要は、ボタンを押されたら、funcを呼び出せ。
funcでは、aが0ならば、そこで終了しろ。
そうでなければ、documentオブジェクト内のFormNameと言う名前のオブジェクトのsubmitメソッドを呼べ。
です。

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング