• ベストアンサー

CHECKBOXとTEXTBOXのnameが同じ場合

下記のようにチェックボックス名とテキストボックス名が同じ場合、エラーになりますが、これをjavascriptのみでうまく処理できる方法はないでしょうか。 #nameは同じまま。 #cgiを経由せず。 #下記と同じことをやりたいわけではありません。単に簡単にしたサンプルです。 <form name="main"> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="東京">東京<BR> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="大阪">大阪<BR> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="その他" onclick="document.main.address.value = 'その他だよ'">その他<BR> <INPUT TYPE="text" NAME="address" SIZE="20"> </form>

質問者が選んだベストアンサー

  • ベストアンサー
  • shorn
  • ベストアンサー率41% (12/29)
回答No.1

名前がかぶってしまう場合は名前からデータを参照できなくなります。 番号から取得しましょう。 s-holmesさんがどのくらいの理解力と知識があるのかわからないためSAMPLEだけで理解できなければすみません。 (逆にSAMPLEなんて馬鹿にするなと思われたらすみません。) SAMPLE動作確認 IE5/WIN2K SAMPLE使用・・・ 変更,使用,配布,商用等全許可。 著者完全免責。 以下SAMPLE/ <html> <head> <script language="JavaScript"> <!-- function PROGRAM_0(FORM,NAME){ var Str = ""; var Arrangement=GetElementsPosition(FORM,NAME) var OtherChecking = 0; //---------------------------------------------- //CHECKBOX に対する処理 for(i=0;i<Arrangement.length;i++){ if(document.forms[FORM].elements[Arrangement[i]].type=="checkbox"){ if(document.forms[FORM].elements[Arrangement[i]].checked==true){ if(document.forms[FORM].elements[Arrangement[i]].value!="その他"){ Str += document.forms[FORM].elements[Arrangement[i]].value + "/"; }else{ OtherChecking = 1; } } } } //---------------------------------------------- //TEXT に対する処理 if(OtherChecking==1){ for(i=0;i<Arrangement.length;i++){ if(document.forms[FORM].elements[Arrangement[i]].type=="text"){ if(document.forms[FORM].elements[Arrangement[i]].value!=""){ Str = document.forms[FORM].elements[Arrangement[i]].value + "/"; }else{ alert('その他を選択した場合は入力エリアに値を入力してください'); return 0; } } } } //---------------------------------------------- //なぜ処理を分けているか //番号で行う場合上から順に行われるため //汎用性を持たせるには処理を分ける //---------------------------------------------- alert(Str); //---------------------------------------------- } // PROGRAM_SAMPLE : GetElementsPosition // フォーム名,エレメント名を元にその位置を取得します // RETURN 値 : 配列方変数 (位置ナンバー) // (c)SHORN FONDA **AD2002** function GetElementsPosition(FORM,NAME){ var Arrangement = new Array(); k = 0; for(i=0;i<document.forms[FORM].elements.length;i++){ if(document.forms[FORM].elements[i].name==NAME){ Arrangement[k]=i; k++; } } return Arrangement; } //--> </script> </head> <body bgcolor="#ffffff"> <form name="main"> <INPUT TYPE="CHECKBOX" NAME="add" VALUE="東京">偽者<BR> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="東京">東京<BR> <INPUT TYPE="CHECKBOX" NAME="add" VALUE="東京">偽者<BR> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="大阪">大阪<BR> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="その他" onclick="document.main.address.value = 'その他だよ'">その他<BR> <INPUT TYPE="text" NAME="address" SIZE="20"> <input type=button value=start onClick="PROGRAM_0('main','address')"> </form> </form> </body> </html>

その他の回答 (2)

noname#5841
noname#5841
回答No.3

こんにちは。 nameを取得する際に、TYPE取得もしたらどうですか? その場合、<HEAD></HEAD>タグ内か、外部JSにJavaScript書かなくてはなりませんが。 <html> <head> <title>test</title> <script language="javascript"> <!-- function CheckBX(t){ var t_val = t.value; for(i=0; i<document.main.address.length; i++) if (document.main.address[i].type != "checkbox"){ document.main.address[i].value = t.value;} } //--> </script> </head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> <form name="main"> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="東京">東京<BR> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="大阪">大阪<BR> <INPUT TYPE="CHECKBOX" NAME="address" VALUE="その他" onclick="CheckBX(this);">その他<BR> <INPUT TYPE="text" NAME="address" SIZE="20"> </form> </body> </html> どでしょ?

  • loveobo
  • ベストアンサー率48% (102/210)
回答No.2

nameを共通にと仰るのは、選択肢のうちひとつだけ(その他ならtextbox)の値を 取得する意図でしょうか? 当方初心者につき、#1のご回答とは比較にならない いいかげんなスクリプトです。はずしていたらご容赦ください。 <html><head> <script language="JavaScript"><!-- function f() { for(i=0; i<document.main.address.length; i++){ if (document.main.address[i].checked){ alert(document.main.address[i].value); return;} } } //--> </script></head> <body><form name="main"> <input type="radio" name="address" value="東京">東京<br> <input type="radio" name="address" value="大阪">大阪<br> <input type="radio" name="address" value="" onClick="this.value=document.main.address[3].value">その他 <input type="text" name="address" size="20" onBlur="document.main.address[2].value=this.value"> <input type="button" value="テスト" onClick="f()"> </form></body></html>

関連するQ&A

  • JavaScriptでcheckboxの入力個数制限

    以下のようなチェックボックスがあります。 3つ以上チェックできないようにしたいのですが、JavaScriptで可能でしょうか? <FORM method=POST action="aaa.cgi" name="FORM1"> <input type="checkbox" name="Q1" value="1">1<br> <input type="checkbox" name="Q2" value="1">2<br> <input type="checkbox" name="Q3" value="1">3<br> <input type="checkbox" name="Q4" value="1">4<br> <input type="checkbox" name="Q5" value="1">5<br> </form>

  • checkbox 特定項目だけを、チェックするには

    こんにちは。いつもお世話になります。 checkbox内で、同じnameの中から特定のものだけ チェックさせるにはどうしたら良いでしょうか。 条件として、name='or52'の部分は変更出来ません。 <input type='button' value='A,B,Cだけを同時にチェック' onclick='checkAll();'> <form action='xxx.cgi' method='post' name='f1'> <input name='or5' type='checkbox' value='A'><br> <input name='or5' type='checkbox' value='B'><br> <input name='or5' type='checkbox' value='C'><br> <input name='or5' type='checkbox' value='D'><br> <input name='or5' type='checkbox' value='E'><br> <input name='or5' type='checkbox' value='F'><br> ......... </form> それで、こんなのをウェブから探してきました。 function checkAll() { for (i=0; i<7; i++) document.f1.elements["or52"+i].checked = true; } そして、同時にチェックしたいものだけ下記の様にしました。 <input name='or52' type='checkbox' value='A' id='or51'> <input name='or52' type='checkbox' value='B' id='or52'> <input name='or52' type='checkbox' value='C' id='or53'> 取りあえずできますが、エラーがでます。 「document.f1.elements["..."]は、objまたはnullではない!」 どうか教えて下さい。よろしくお願いします。

  • checkboxについておしえてください

    <form action=" " method="post"> <input type="checkbox" name=" figure" value="1"><img src="a.png"> <input type="checkbox" name=" figure" value="2"><img src="b.png"> <input type="checkbox" name=" figure" value="3"><img src="c.png"> <input type="checkbox" name=" figure" value="4"><img src="a.png"> <input type="checkbox" name=" figure" value="5"><img src="b.png"> <input type="submit" value="送信する"> </form> とした場合に、絵の左にくるチェックボックスの位置を、添付した図のように位置を図の中にもってこれないかと考えています。できれば、大きさも変えたいと考えています。 cssでできるのでしょうか? cssじゃない方法などもあるのでしょうか?よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • form の checkbox の配列 name の選択値を confirm画面に出すには?

    form の checkbox の name を配列で記述しました( PHP で受け取るのに便利なので)が、checked value を confirm画面に出すことができません。 ご存知の方、お教えください。 ソースおよび分からない部分はつぎのとおりです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www/w.w3.org/TR/REC-html14/loose.dtd"> <HTML> <HEAD> <META http-equiv=content-type content="text/html;charset=Shift_JIS"> <TITLE>よろしくお願いします。</TITLE> <META http-equiv=content-Style-type content="text/css"> <script type="text/javascript"> <!-- function conf(tfm) { wrt = "選択項目は以下でよろしいですか?\n\n" /* この部分に書くべき script がわかりません。   よろしくお願いいたします。m(_ _)m     */ confirm ( wrt ) ; } //--> </script> </HEAD> <BODY> <form name=tfm action="http://localhost/form.php" method=post> <BR>選択してください。(複数選択可)<BR><BR> <input type=checkbox name="abc[]" value="A ">A,  <input type=checkbox name="abc[]" value="B ">B,  <input type=checkbox name="abc[]" value="C ">C,  <input type=checkbox name="abc[]" value="D ">D,  <input type=checkbox name="abc[]" value="E">E<BR><BR> <input type=button value="確 認" onClick="conf(tfm)">  <input type=reset value="キャンセル"> </form> </BODY> </HTML>

  • htmlのcheckboxで質問です

    <form action=" " method="post"> <p> <input type="checkbox" name="riyu" value="1"><img src="a.png"> <input type="checkbox" name="riyu" value="2"><img src="b.png"> <input type="checkbox" name="riyu" value="3"><img src="c.png"> </p> <p> <input type="submit" value="送信する"> </p> </form> のようにして、絵の左にくるチェックボックスの位置や大きさを変えたいのですが、cssとかでできるのでしょうか?できれば絵に重なるようにチェックボックスを持ってきたいのですが。 cssじゃない方法などもあるのでしょうか?よろしくお願いいたします。

  • checkbox の入力チェックのやり方について

    お世話になります。 フォームにて、 javascriptで、入力チェックをおこないたいと思っています。 チェックボックスについては、どれか選択が一つでもなければ、アラートで、文字を出したいと思いますが、うまくできません。 チェックボックスの入力確認の方法を教えてください。 よろしくお願いいたします。 現在作りかけのソースは、下記の通りです。 <html> <head><title>-</title></head> <body> <form method="post" action="" onsubmit="return form_Validator(this)"> <input type="text" name="a1" size="15" maxlength="12"> <BR> <input type="checkbox" name="a1001" value="1"> <input type="checkbox" name="a1002" value="1"> <input type="submit" value="登録" name="submit"> </form> <script Language="JavaScript"> <!-- function form_Validator(doc) { if ( doc.a1.value == "" ) { alert( "BAD" ); return false; } /* a1001かa1002のチェックボックスのチェックがなければアラート----*/ return (true); } //--> </script> </body> </html>

  • 大量のcheckboxにcheckedを入れる

    チェックボックスが50個あります。 送信ボタンを押して元のページを再度開きます。 そのときにチェックしたボックスにチェックを入れた状態にしたいです。 inputタグの中に<?php if(isset($checkbox2) && in_array('b2',$checkbox2)){echo ' checked';} ?>を入れていますが単調になってしまいます。 単調にならずにする方法はありますか? <input type="checkbox" name="chk1[]" value="a1" />の場合はインデックスが固定でないのでできませんでした。 その他いけない箇所があれば教えて下さい。 お願いします。 <?php if(isset($_GET["chk1"])){ $checkbox1 = $_GET["chk1"]; for($i=0; $i<sizeof($checkbox1); $i++){ print $checkbox1[$i]."<br />"; } } if(isset($_GET["chk2"])){ $checkbox2 = $_GET["chk2"]; foreach($checkbox2 as $key => $val){ print $val."<br />"; } } ?> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form method="get" action="checkbox.php"> <input type="checkbox" name="chk1[]" value="a1" /> <input type="checkbox" name="chk1[]" value="a2" /> <input type="checkbox" name="chk1[]" value="a3" /> <input type="checkbox" name="chk1[]" value="a4" /> <input type="checkbox" name="chk1[]" value="a5" /> <input type="checkbox" name="chk1[]" value="a6" /> <input type="checkbox" name="chk1[]" value="a7" /> <input type="checkbox" name="chk1[]" value="a8" /> <input type="checkbox" name="chk1[]" value="a9" /> <input type="checkbox" name="chk1[]" value="a10" /> <br /> <input type="checkbox" name="chk2['b1']" value="b1" <?php if(isset($checkbox2) && in_array('b1',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b2']" value="b2" <?php if(isset($checkbox2) && in_array('b2',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b3']" value="b3" <?php if(isset($checkbox2) && in_array('b3',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b4']" value="b4" <?php if(isset($checkbox2) && in_array('b4',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b5']" value="b5" <?php if(isset($checkbox2) && in_array('b5',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b6']" value="b6" <?php if(isset($checkbox2) && in_array('b6',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b7']" value="b7" <?php if(isset($checkbox2) && in_array('b7',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b8']" value="b8" <?php if(isset($checkbox2) && in_array('b8',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b9']" value="b9" <?php if(isset($checkbox2) && in_array('b9',$checkbox2)){echo ' checked';} ?>/> <input type="checkbox" name="chk2['b10']" value="b10" <?php if(isset($checkbox2) && in_array('b10',$checkbox2)){echo ' checked';} ?>/> <br /> <input type="submit" value="送信" /> </form> </body> </html>

    • 締切済み
    • PHP
  • checkboxクリックされていないidを取得

    <form id="chkform"> <input type="checkbox" name="check" value="aaa" id="aaa">aaa <input type="checkbox" name="check" value="bbb" id="bbb">bbb <input type="checkbox" name="check" value="ccc" id="ccc">ccc                   ・                   ・                    ・ <input type="checkbox" name="check" value="zzz" id="zzz">zzz </form> チェックボックスの複数の項目の内、チェックされていない全てのIDを取得する方法を教えてください。 よろしくお願いいたします。

  • チェックボックスにチェックしたファイルだけをダウンロードできるようにしたい

    サーバーにpdfファイルを10個保存しています。 HTMLページでチェックボックスにチェックを入れたpdfだけを ダウンロードできるようにURL入りの返信メールを自動的に送りたい のですが、やり方がわかりません。 どなたか詳しい人がおられましたら、教えていただけますでしょうか。 一応チェックボックスの過去の回答を見たのですが見当たりません。 (全て見れたわけではないですが) チェックボックス表示までは以下のところまでできたのですが。 よろしくお願いします。 <form> <input type="checkbox" name="グループ1" value="項目1">Apdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目2">Bpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目3">Cpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目4">Dpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目5">Epdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目6">Fpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目7">Gpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目8">Hpdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目9">Ipdf<br><br><br><br> <input type="checkbox" name="グループ1" value="項目10">Jpdf<br><br><br><br> </form>

  • チェック出来る数を制限&チェックされない場合0

    【チェックボックスにチェック出来る数を制限しながら、チェックされない場合には0を入力する】ということが希望です。 それぞれを分離させた場合は、下記で可能でした。 この2つを同時に満たす方法が分かりません。 ご教授頂きたくお願いいたします。 【チェックボックスにチェック出来る数を制限する方法】 <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn = new Array("ch1","ch2","ch3","ch4","ch5"); chc = 3; // チェックできる数 // チェックボックスにチェックできる数を制限する function chBx(cn){ cnt = 0; for(i=0; i<chn.length; i++) { if(document.form1.elements[chn[i]].checked) cnt++; } if(cnt > chc) { alert("チェックできる項目は" + chc + "個までです"); document.form1.elements[cn].checked = false; } } //--> </SCRIPT> <input type="checkbox" name="ch1" value="2" onClick="chBx('ch1')"> <label for="type1">1</label> <BR> <input type="checkbox" name="ch2" value="2" onClick="chBx('ch2')"> <label for="type1">2</label> <BR> <input type="checkbox" name="ch3" value="3" onClick="chBx('ch3')"> <label for="type1">3</label> <BR> <input type="checkbox" name="ch4" value="4" onClick="chBx('ch4')"> <label for="type1">4</label> <BR> <input type="checkbox" name="ch5" value="5" onClick="chBx('ch5')"> <label for="type1">5</label> <BR> 【チェックボックスがチェックされない場合に0を入力する】   <input type="hidden" name="ch1" value="0">   <input type="checkbox" onclick="this.form.ch1.value=this.checked ? 1 : 0">   <input type="hidden" name="ch2" value="0">   <input type="checkbox" onclick="this.form.ch2.value=this.checked ? 1 : 0">   <input type="hidden" name="ch3" value="0">   <input type="checkbox" onclick="this.form.ch3.value=this.checked ? 1 : 0">   <input type="hidden" name="ch4" value="0">   <input type="checkbox" onclick="this.form.ch4.value=this.checked ? 1 : 0">   <input type="hidden" name="ch5" value="0">   <input type="checkbox" onclick="this.form.ch5.value=this.checked ? 1 : 0"> 上記を同時に満たしたいというのが今回の質問の趣旨です。

専門家に質問してみよう