テキストボックスのlength>0の間、常にチェックボックスをオフにしたい

このQ&Aのポイント
  • HTMLフォームで、テキストボックスに入力がある場合は常にチェックボックスをオフにします。
  • テキストボックスが空の場合は常にチェックボックスをオンにします。
  • JavaScriptを使用してこの機能を実装することができます。
回答を見る
  • ベストアンサー

テキストボックスのlength>0の間、常にチェックボックスをオフにしたい

HTMLフォームで、以下のようにチェックボックスとテキストボックス if (テキストボックスのlength > 0 )が真である間は 常にチェックボックスをオフに、 if (テキストボックスのlength > 0 )が偽である間は 常にチェックボックスをオンとするよう、常に監視したいです。 これをjavascriptで実現する方法について、ご教示よろしくお願いします。 <html> <head> </head> <body> <form name="0" id="0"> <input type="checkbox" name="1" id="1" checked> <input type="text" name="2" id="2"> </form> </body> </html>

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

  • ベストアンサー
  • NINJA104
  • ベストアンサー率43% (133/306)
回答No.1

即行で書いてみました。 <html> <head> <script language="JavaScript" type="text/JavaScript"> <!-- function firstload() { document.n0.n1.checked=true; checktext(); } function checktext() { if(document.n0.n2.value.length){document.n0.n1.disabled=false;} else{document.n0.n1.disabled=true;} } //--> </script> </head> <body onLoad="firstload()"> <form name="n0" id="0" action=""> <input type="checkbox" name="n1" id="1"> <input type="text" name="n2" id="2" onChange="checktext()"> </form> </body> </html> こんな感じかな :-)

litton101
質問者

お礼

NINJA104さん 早速のご教示、ありがとうございました。 感謝に耐えません。 質問の仕方が悪く、 チェックオフ=チェックボックス無効でなく チェックオフ=チェックを外す の意味だったですが、 disabled(2箇所)をcheckedに変更したら 希望通りになりました。 大変助かりました。ありがとうございました。

関連するQ&A

  • チェックボックスのlengthについて

    チェックボックスで以下のソースでは obj.length=[undefined] と表示されます。1という結果ではないのでしょうか? <script type="text/javascript"> <!-- function test(obj){ alert('obj.length=[' + obj.length + ']'); } // --> </script> <form name="test_form"> <input type="checkbox" name="chk" value="">チェック1 <input type="button" value="テスト" onClick="test(document.test_form.chk)"> </form>

    • ベストアンサー
    • HTML
  • チェックボックスのvalueを、テキストボックスに挿入したい

    文末のように、4つのチェックボックスと1つのテキストボックスがあります。 (1) チェックボックスのチェックに伴い各チェックボックスのvalueを そのままテキストボックスの方に転記したいです。 (2) 逆に、チェックが外れたら、該当する valueをクリアしたいです。 (3) 鉄道~航空の一つ以上にチェックが入っている間、テキストボックス自体 をreadonlyにし、手動でいじれなくしたいです。 逆に、全てのチェックが解除されている間は、自由記述可能です。 (4) チェックする前に何らかの値が入っていたら、それらは強制クリアして、 valueの方を優先したいです。 イメージとして、「鉄道」と「航空」にチェックが入ったら、テキストボックスの値は 「新幹線 在来線 ヘリコプタ ジャンボ 」となります。 現在、テキストボックスはReadOnlyです。 そして「鉄道」の方だけチェックが解除されたら、テキストボックスの値は 「ヘリコプタ ジャンボ 」となります。テキストボックスは、まだReadOnlyです。 さらに「航空」のチェックも解除されたら、テキストボックスの値は 空白「」となります。テキストボックスのReadOnlyも解除されます。 <html> <head> </head> <body> <form method="post" action="samp.php" id="query" name="query"> <input type="checkbox" class="norimono" name="norimono[]" value="新幹線 在来線 ">鉄道 <input type="checkbox" class="norimono" name="norimono[]" value="軽 セダン クーペ ">四輪車 <input type="checkbox" class="norimono" name="norimono[]" value="小型 中型 大型 ">二輪車 <input type="checkbox" class="norimono" name="norimono[]" value="ヘリコプタ ジャンボ ">航空 <input value="" size="50" type="text" name="keyword"> </form> </body> </html>

  • チェックボックスのチェックについて

    submit時に一つでもチェックがなければアラートを表示 チェックがあれば進む・・・としたいです。 <form action=next.html name=form1> <input type=checkbox name=checkbox1 value=1> <input type=checkbox name=checkbox2 value=2> <input type=checkbox name=checkbox3 value=3> <input type=checkbox name=checkbox4 value=4> <input type=checkbox name=checkbox5 value=5> ~以下50まで続きます <input type=submit value=submit> </form> function countChecked(form1) { var total = 0; var max = 50; for (var index = 0; index < form1.checkbox.length; index++) { total += form1.checkbox[index].checked ? 1 : 0; } if(countChecked(document.form1)) > 0) { return true; } else { alert("no"); return false; } return(total); } 過去に似たような質問を参考に作ってみましたがダメでした。 チェックボックスの名前の付け方が悪いのでしょうか。

  • チェックボックスの未入力チェック

    ざっとですけれども <form action="**" name="myform" onsubmit="return Check()" method=post> <input type="checkbox" name="Erasedata" id="Erasedata" value="1" > <input type="checkbox" name="Erasedata" id="Erasedata" value="2" > ・・・ <input type="checkbox" name="Erasedata" id="Erasedata" value="5" > <input type="submit" value="選択されたものを削除する"> このようなチェックボックスがあったとして function Check() { for (i=0;i<document.myform.length;i++)  {   if(document.myform.Erasedata[i].checked==true) {return true;}  } alert("どこかにチェックを入れて下さい "); return false; } といった感じで未入力チェックをしています。 チェックボックスが複数の場合はうまく動くのですが、チェックボックスがひとつだとうまくいきません。スクリプトで何か問題があるようでしたらご指摘お願いできませんでしょうか。よろしくお願いいたします。

  • 一つのチェックボックスのON/OFFに応じて他の複数をON/OFFに

    昨日の質問した下記の関連で再質問です。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1765687 親1に対し、子1~4と、合計5つのチェックボックスがあり、 親のチェックOFF ⇒ 子1~4をdisableに、 子のチェックON ⇒ 子1~4をactive としたいのですが、 #4さんのご回答を適用すると、上記5つのチェックボックス以外も 全てdisableの対象になってしまいます。 他方、自分の元質問のソースを改造しようとも思いましたが、 子1~4のname属性が全て違う名前のため、そのままでは使えません。 ついでに(些細なことですが) 子1~4の全てがONにされた時に、親がOFFなら自動でONにしたいです。 テンプレートは下記ですが、よろしくお願い致します。 <html> <head> <script language="javascript" type="text/javascript"> // ■■■■ </script> </head> <body> <form id="query" name="query"> <input type="checkbox" name="oya" value="1" checked>親 <input type="checkbox" name="ko1" id="ko1" value="1" checked>子1 <input type="checkbox" name="ko2" id="ko2" value="1" checked>子2 <input type="checkbox" name="ko3" id="ko3" value="1" checked>子3 <input type="checkbox" name="ko4" id="ko4" value="1" checked>子4 </form> </body> </html>

  • チェックボックスのON/OFFに応じて別の複数のチェックボックスも連動ON/OFF

    7番のcheckboxをON→1,2,4,5番にチェックもON 7番のcheckboxをOFF→1,2,4,5番にチェックもOFF という風に動作させる記述をご教示ください。 よろしくお願い致します。 <html> <head> <script type="text/javascript"> </script> </head> <body> <form action="" method="post" name="myform"> 去年<br> 1番<input type="checkbox" name="kyonen[]" value="1">1月<br> 2番<input type="checkbox" name="kyonen[]" value="2">2月<br> 3番<input type="checkbox" name="kyonen[]" value="3">3月<br> 今年<br> 4番<input type="checkbox" name="kotosi[]" value="1">1月<br> 5番<input type="checkbox" name="kotosi[]" value="2">2月<br> 6番<input type="checkbox" name="kotosi[]" value="3">3月<br> 7番<input type="checkbox" name="mychk">去年と今年の1、2月をまとめてチェック<br> </form> </body> </html>

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

    質問失礼します。 チェックボックスが下記のようにある場合ですが、 どれかではなく複数選択で テキストボックスを表示させるにはどうしたらよいでしょうか? <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をご教示願いますでしょうか? 宜しくお願い致します。

  • 複数あるチェックボックスの入力チェックするには?

    チェックボックスの入力チェックスクリプトを探しており、下記のようなスクリプトをネット検索で見つけました。 <!-- <script type="text/javascript"> function chNull(msg,obj) { if(!obj) return true; if((obj.type || obj[0].type) == 'checkbox'){ var flag = 0; if(obj.length){ for(var i=0; i<obj.length; i++) { if(obj[i].checked) flag = 1; } } else { if(obj.checked) flag = 1; } if(flag == 0) { alert(msg + 'を選択してください。'); return false; } } return true; } --> </script> <form method="POST" action="■.cgi" onSubmit="return chNull('チェックボックス',a);"> <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 </form> 同じnameのチェックボックス群がひとつしかないときはこれで問題ないのですが、 下記のようにnameが複数ある場合にはこのスクリプトのどの部分を変えればよいのでしょうか? <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 <input type="checkbox" name="b" value="B1" />B1 <input type="checkbox" name="b" value="B2" />B2 <input type="checkbox" name="c" value="C1" />C1 <input type="checkbox" name="c" value="C2" />C2 できればこのスクリプトをベースとして使用したいと思っています。どなたかお分かりの方がいらっしゃいましたらお教え下さいませ。 よろしくお願い致します。

  • 複数のチェックボックスの一括チェック/解除などのコントロール

    チェックボックスである、1月~12月の値を検索条件としてPHPに渡します。 その際、次のように動作するjavascriptをご教示下さい。よろしくお願い致します。 (1) 通年をチェックしたら、1月~12月もチェック(解除されたら全て解除) (2) 上半期をチェックしたら、1月~6月もチェック(〃) (3) 下半期をチェックしたら、6月~12月もチェック(〃) (4) 通年、上半、下半は、いずれかがチェックされている間、他はdisabledに。 チェックが外れたら、全てアクティブかつ全チェックが解除される状態に。 以上が妥当と思いますが、(4)にの仕様についてはより洗練いただければ誠に幸いです。 <html> <head> <script language="javascript"> </script> </head> <body> <form method="post" action="search.php" id="form1" name="form1"> <input type="checkbox" name="month[]" value="200501">2005年1月<br> <input type="checkbox" name="month[]" value="200502">2005年2月<br> <input type="checkbox" name="month[]" value="200503">2005年3月<br>          :(gooの文字数制限により略) <input type="checkbox" name="month[]" value="200510">2005年10月<br> <input type="checkbox" name="month[]" value="200511">2005年11月<br> <input type="checkbox" name="month[]" value="200512">2005年12月<br> <input type="checkbox" name="all" value="">通年<br> <input type="checkbox" name="1sthalf" value="">上半期のみ<br> <input type="checkbox" name="2ndhalf" value="">下半期のみ<br> <input type="submit" name="exec" value="検索"> </form> </body> </html>

  • JavaScript チェックボックスで指定の箇所をチェックする方法

    初めての投稿ですが、よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。 一覧表の行or列の先頭にあるチェックボックスを選択すると 選択された行or列にあるチェックボックスを全てチェックされ、 先頭のチェックボックスを外すと全て解除される。 (例:横A□チェックボックスを選択すると右にある全てのチェックボックスが選択される。チェックを外すと右にある全てのチェックボックスが未選択になる。) という事を行いたいと思い、色々調べてみたのですが、 発見できませんでしたので質問させていただきました。 どうかお助けください。m(>_<)m -- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY> <form name="F1"> <table border="1"> <tr> <td>一覧</td> <td>縦A<br><input type="checkbox" id="" /></td> <td>縦B<br><input type="checkbox" id="" /></td> <td>縦C<br><input type="checkbox" id="" /></td> </tr> <tr> <td>横A<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横B<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横C<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> </table> </form> </BODY> </HTML>

専門家に質問してみよう