• 締切済み

チェックボックスをクリックしたら、テキストに入力出来る様にしたいです

今メールフォームを作っています。 チェックボックスにチェックしたら、テキストフィールドに記入しないと、 エラーがでる様にJavascriptでチェックをかけたいのですが教えて頂けませんでしょうか。 下記のようなフォームにしたいです。 ■フォーム これをあなたは何処で知りましたか? チェックボックス1 新聞 チェックボックス2 テレビ チェックボックス3 その他 テキストフィールド その他を選んだ方は記入して下さい。 このチェックボックスは必須にして、 チェックボックス1~3までのどれかをチェックしないとアラートを表示したいです。 また、チェックボックス3を選択したのにテキストフィールドに入力していない場合も アラートを表示したいです。 上記のalertは送信ボタン<input name="submit" type="submit" value="情報を送信する"> を押した際に出したいです。 この様なチェックボックスのグループを同じフォームに2つ作りたいです。

みんなの回答

  • auty
  • ベストアンサー率58% (284/486)
回答No.3

・ 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <script type="text/javascript"> <!-- function checkRadio() { var flag; var f=document.getElementById('f1'); for (var j=1 ; j<=2 ; j++) { flag = false; var chbName = "chb" + j; for (var i=0 ; i<f[chbName].length ; i++) { if (f[chbName][i].checked) flag = true; } if (!flag) { alert(chbName + ": エラー"); return false; } if (f[chbName][f[chbName].length-1].checked && f['other'+j].value.replace(/\s/g,"")=="") { alert(chbName + ": その他エラー"); return false; } } return true; } //--> </script> <form id="f1" action=""> <table border="border" cellpadding="5" align="center"> <tr> <td><div style="background-color: #eee">これをあなたは何処で知りましたか? </div> <input type="checkbox" name="chb1" value="np">新聞<br> <input type="checkbox" name="chb1" value="tel">テレビ<br> <input type="checkbox" name="chb1" value="other">その他<br /> その他を選んだ方は記入して下さい。<br /> <input type="text" name="other1"></td> </tr> <tr> <td><div style="background-color: #eee">これをあなたは何処で知りましたか2? </div> <input type="checkbox" name="chb2" value="ff">Firefox2<br> <input type="checkbox" name="chb2" value="ie">IE2<br> <input type="checkbox" name="chb2" value="other">その他2<br /> その他2を選んだ方は記入して下さい。<br /> <input type="text" name="other2"></td> </tr> <tr> <td><input name="submit" type="submit" value="情報を送信する" onclick="return checkRadio();"></td> </tr> </table> </form>

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

この場合、新聞・テレビ・その他は同じグループなので、思い切って 同じ名前で管理してしまうという手があります。 そうすればこんな感じでチェックできるでしょう <script> function check(f){ var know=f.elements["know[]"]; var flg=false; for(var i=0;i<know.length;i++){ if(know[i].checked){ flg=true; break; } } alert(flg) } </script> <form> <input type="checkbox" name="know[]" value="newspaper">新聞 <input type="checkbox" name="know[]" value="tv">テレビ <input type="checkbox" name="know[]" value="other">その他 <input type="button" value="check" onclick="check(this.form)"> </form>

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

タグの disabled 属性を操作したら良いんじゃない? http://www.tohoho-web.com/html/input.htm http://www.tohoho-web.com/js/form.htm

関連するQ&A

  • 選択肢によって入力必須が変わるフォームの入力チェックJavaScrip

    選択肢によって入力必須が変わるフォームの入力チェックJavaScript フォームの入力チェックのJavaScriptを作成しています。 特定のラジオボタンにチェックを入れた場合のみ、 入力必須になるテキストボックスの 入力チェックJavaScriptを教えてください。 ラジオボタンが複数あるフォームで、 <input type="radio" name="type" value="type1" /> <label>タイプ1</label> <input type="radio" name="type" value="type2" /> <label>タイプ2</label> タイプ2を選んだ場合のみ、必須項目にしたいテキストボックスがあります。 <input type="text" name="name1" /> テキストボックスが空白だった場合にアラートを出すJavaScriptは 現在このようになっています。 (参考にしていたサイトがあるのですが、忘れてしまいました・・・。) $(function(){ $("form1").submit(function(){ if($("input[name='name1']").val()==""){ $("input[name='name1']").css("border","1px solid #A70F00"); alert('必須項目に未入力があります'); return false; }) }) このJavaScriptをさらに、if文で括って、 name="type" の value が type2 であれば・・・、という処理を追加すればよいのだと 思いますが、書き方が分からず困っています。 どうかよろしくお願いします。

  • チェックボックスとテキストフィールドを連動させて、Javascriptでチェックをかけたい

    このようなアンケートがあるとします。 //アンケートスタート ●Q1 あなたはJavascriptを使いこなしていますか? ラジオボタン回答1 使いこなしている ラジオボタン回答2 あまり使いこなしているといえない ラジオボタン回答3 ぜんぜん使いこなしていない ●Q2 Q1で「あまり使いこなしているといえない」 「ぜんぜん使いこなしていない」と回答した方のみお答えください。 その理由はどのようなものですか? チェックボックス回答1 むずかしい チェックボックス回答2 わかりにくい チェックボックス回答3 そのほか テキストフィールド そのほかの理由(       ) 【送信ボタン】 //アンケートエンド ■上のアンケートでJavascriptを使用して 次のことをしたいのですが、教えてください。 1.Q1の2と3にチェックがあるのに、 Q2に未回答のままフォームデータを送信しようとした場合に、 アラートを表示させたい 2.Q2で3を選んだ人にもかかわらず、 そのほかの理由テキストフィールドに未記入のまま フォームデータを送信しようとした場合、 アラートを表示させたい よろしくお願いします。

  • JavaScriptにて、2つのチェックボックスのチェックができません

    お世話になっております。 お分かりになる方いらっしゃいましたら、ご教授願えますでしょうか? 現在採用に関する応募フォームを作成しています。 JavaScriptにてフォーム内のチェックボックスに チェックが入っているか、必須チェックをさせたいと思っています。 テキストボックスやコンボボックスなど、いくつか必須チェックがある中で、 チェックボックスの項目についての必須チェックがうまくいきません。 チェック完了後、cgiにてメールを送信するようにしているのですが、 チェックがされず、メールを送信してしまいます。 ローカルで行ってみたのですが、チェックをスルーして、 cgiに遷移してしまいます。 フォームイメージは以下の感じです。 <応募フォーム> --------------------------- 希望勤務地:□本社 □大阪 --------------------------- 2つのチェックボックスどちらにもチェックが入っていない場合は、 エラーメッセージを出し、処理を中止します。 どちらのチェックボックスにもチェックが入っていても、 エラーは出さずにcgiへ遷移します。 以下は現在のコードの内容です。 <HTMLコード> <form method="POST" action="send.cgi" name="応募フォーム" onSubmit="return check()"> <input type="checkbox" name="希望勤務地" value="本社" checked>本社 <input type="checkbox" name="希望勤務地" value="大阪">大阪 <input type="submit" value=" 送信 "> <input type="reset" value=" 取消 "> <Scriptコード> function check(){ if(!document.応募フォーム.希望勤務地.value.checked){ flag = 1; window.alert('必須項目[希望勤務地]にチェックがされていません'); } } 色々試してみたのですが、うまくいきませんでした。 チェックボックスのnameを同じ名前にしているのが原因でしょうか? お手数ですが、宜しくお願いいたします。

  • チェックボックスを選択するとテキストボックスが表示

    質問失礼します。 チェックボックスが下記のようにある場合ですが、 どれかではなく複数選択で テキストボックスを表示させるにはどうしたらよいでしょうか? <input type="checkbox" name="example" value="" />テレビ ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />新聞 ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />CM ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />その他 ←チェックしたらテキストボックス表示 色々なJavaScriptを試したのですが、 どうも挙動がおかしく、クリックを続けると表示がされたりできなかったり、 という具合になります。 それぞれテキストボックスを表示させたいチェックボックスに 反映できるJavaScriptをご教示願いますでしょうか? 宜しくお願い致します。

  • フォーム テキストエリアのチェック

    1.フォームでsubmit俗に言う[送信ボタン]を押すと同時に   テキストボックス内に    未記入やスペースが記入がされていない事    半角英数字のみ記入されている事   をチェック後   アラートを出すもしくは送信させない 2.テキストボックス内に半角英数字以外は記入不可能にする 上記のような事をする方法をお教え下さい。

  • チェックボックスの値を(1,0)のようにすべて送信する方法

    formをsubmitすると、チェックボックスの値は、 チェックされた項目のvalue値が配列の形で送信されますよね。 たとえば、 <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="111" CHECKED> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="222" CHECKED> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="333" CHECKED> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="444"> <INPUT TYPE="CHECKBOX" NAME="C_BOX" VALUE="555" CHECKED> だと、 [111,222,333,555] のように。 今回は、表形式でデータを表示し、 チェックされた行の、他の列の値(フィールド)も取得したいのです。 他の列のフィールドは、チェックされていない行でも入力されている可能性があります。 そうすると、そのフィールドの値も配列にして送ってしまうと、 チェックボックスの値と数が合わなくなり、横方向での関連付けが出来なくなってしまいます。 なので、チェックボックスの送信値を、配列の要素数は全件で、 チェックされたかされていないかということが分かるように することは不可能でしょうか? JavaScriptは規約により、使うことが出来ない状況で困っています(><) 何か案があれば教えてください。

    • ベストアンサー
    • HTML
  • 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>

  • チェックボックスとテキストの値

    初心者で勉強中です。できるだけわかりやすくしていただけると助かります。 前提として、 (1)フォーム名:Aform フォーム名:Bformと2つのフォームがあります。 (2)Aformには、Atextというテキストボックスがあります。 (3)Bformには、複数のチェックボックスがあります。  テキストボックスの名前は、CB1、CB2・・・と連番になっています。  aspでデータを書き込みながらチェックボックスを作成しているため、チェックボックスの数はその都度変わります。 ここからが質問なのですが…行いたい事は、 (1)チェックボックスは、1つ以外チェックできないようにし、2つ目のチェックでアラートを出し、チェックをできないようにする。 (2)チェックボックスのvalueをAformのAtextにセット (3)チェックボックスを外した時には、AformのAtextはクリア。 ※aformのAtextは、input type=hidden でもいいと考えています。 現在、調べ調べて、チェックボックスのOnClickで2つ以上でアラートは出て、Atextにも値はセットされるのですが、チェックボックスをクリアした時に、Atext値が残ってしまっています。 どなたか、教えていただけないでしょうか?

  • フォームの入力チェック

    こんにちは、今回はホームページのワザについて教えて下さい~。 今フォームを作成してアンケートを回答してもらうページを作成中なのですが、そこで躓いてしまいました。 CGIでフォームを作成しているのですが、そのフォームの中の回答で必須項目を作りたいのです。回答していないで送信ボタンを押すとダイヤログが出て「××をご記入ください」のようなメッセージを出す・・・こんなのが理想なのです。 今普通にCGIでフォームだけは完了したのですが、そのチェック機能をjavaでつけても動いてくれないのです(泣)。全くjavaが働かず、普通に送信されてしまいます。 CGIを外してjavaだけでやろうとするとアドレスを予め設定していないという事でエラーになりますし・・・。今は <SCRIPT language="JavaScript"> <!-- function Check(){ if(document.myform.ks.value==""){ alert("必須項目を記入してください。"); return false; } ・ ・ ・ // --> </SCRIPT> </HEAD> <BODY><!--××× CGI Program--> <FORM action=http://www.CGIのテキストまでのパス.txt method=post onSubmit="return Check()"><INPUT type=hidden value=××@×× name=sendto><INPUT type=hidden value=/mail/××.htm name=success><!--ここまで--><A name=TOP></A> としてあります・・・。 すみません!どなたかわかる方!ぜひ教えて下さい、お願いいたします!

    • ベストアンサー
    • HTML
  • チェックボックスのチェック

    チェックボックスのチェックして送信した後のページから送信前のページに戻るとチェックボックスがチェックされた状態でブラウザで表示されます 1 2ここにチェックを入れて削除すると 3 1 3戻るを押した時にここにチェックが入ってしまいます javascriptで戻るボタンをつくっていますが他にチェックが残らずにに戻る方法はありますか? <input type=button value="戻る" onClick="history.back()"> よろしくお願いします

    • ベストアンサー
    • HTML

専門家に質問してみよう