複数対応できるチェックボックスONでのテキストフィールド有効化

2023/08/08 16:20

このQ&Aのポイント

JavaScriptを使用して、複数のチェックボックスに対応し、選択されたチェックボックスに対応するテキストフィールドを有効化する方法を模索しています。
しかし、オブジェクトでサポートされていないというエラーメッセージが表示されます。
問題の原因としては、[getElementById]メソッドを使用してフォーム要素にアクセスする際に、正しい構文を使用していない可能性があります。

ベストアンサー

複数対応できるチェックボックスONでのテキストフィールド有効化

2009/01/20 22:00

nameでなくidから値を取得する方法を模索中です。下記のようにしてみましたが、「オブジェクトでサポートされていない～」とでます。どのあたりに問題がありますでしょうか？ <script type="text/javascript"> function fchk(obj,id) { var frm=obj.form; if(obj.checked==true) { /* テキストボックスを有効化（false）*/ for(var i=1; i<=2; i++){ frm.getElementById("t"+i).disabled=false; } } else { for(var i=1; i<=2; i++){ /* 無効化する前に、入力値をクリア */ if(id=='t'){ frm.getElementById("t"+i).value=""; } /* 無効化（true） */ frm.getElementById("t"+i).disabled=true; } } } </script> <form name="form" action="#"> <input type="checkbox" id="c1" name="aaa" value="オン" onclick="fchk(this,'t')" /> <br /> <input type="text" name="aaa" id="t1" value="" size="20" disabled/> <input type="text" name="aaa" id="t2" value="" size="20" disabled/> </form>

rollbahn
お礼率37% (6/16)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2009/01/21 12:47 回答No.3

今回の問題は3点 1)maparea = document.getElementById('mapitem').style; とありますが、mapitemというidのオブジェクトがありません。 typoだと思います 2)宣言時点でmapitemにアクセスできませんこの手の処理はページを読み終わってから処理するよう、window.onloadを設定するか、function化するのが妥当です。 3)元ソースはスタティックにt1,t2をチェックしているのに今回はt2が省略されています。このままだとt2をチェックしたときにエラーになります。総じてこんな風にすると動きます。 <html> <body> <script type="text/javascript"> window.onload=function(){ maparea = document.getElementById('maparea').style; } function fchk(obj,id) { for(var i=1; i<=2; i++){ if(!obj.checked) document.getElementById(id+i).value=""; document.getElementById(id+i).disabled=!obj.checked; } } </script> <form action="#"> <p> 地図挿入の場合チェック<input type="checkbox" id="c1" name="aaa" value="オン" onClick="fchk(this,'t');maparea.display=(this.checked?'':'none')" /> <br /> 住所1：<input type="text" name="aaa" id="t1" value="" size="20" disabled/><br /> 住所2：<input type="text" name="bbb" id="t2" value="" size="20" disabled/> </p> <div id="maparea" style="display:none;"> 地図が出ます。 </div> </form> </body> </html>

質問者

お礼 2009/01/21 13:58

早速ありがとうございました！注意力がないことを痛感いたしました・・・。一呼吸置いて見直してから投稿するようにします。上記コード参考になりました。ただエラーがでてしまったので、アドバイスのとおり下記のようにしてみました。この度は大変助かりました！！！ありがとうございました。 <html> <body> <script type="text/javascript"> function maparea(){ maparea = document.getElementById('maparea').style; } function fchk(obj,id) { for(var i=1; i<=2; i++){ if(!obj.checked) document.getElementById(id+i).value=""; document.getElementById(id+i).disabled=!obj.checked; } } </script> <form action="#"> <p> 地図挿入の場合チェック<input type="checkbox" id="c1" name="aaa" value="オン" onClick="fchk(this,'t');maparea.display=(this.checked?'':'none')" /> <br /> 住所1：<input type="text" name="aaa" id="t1" value="" size="20" disabled/><br /> 住所2：<input type="text" name="bbb" id="t2" value="" size="20" disabled/> </p> <div id="maparea" style="display:none;"> 地図が出ます。 </div> </form> </body> </html>

その他の回答 (2)

noname#84373

2009/01/20 22:56 回答No.2

質問者

補足 2009/01/21 10:30

ご回答ありがとうございました。このようなやり方もあるのですね。勉強になります。回答No1の方の補足にもあるとおり、今回この動作はID指定でエリアの非表示も同時に行っております。 onClick時に両方実行しているのですが、エラーが出て動作しません。こちらも単独では動作するのですが・・・。ぜひアドバイスをどうぞ宜しくお願いいたします。

yambejp
ベストアンサー率51% (3827/7415)

2009/01/20 22:29 回答No.1

getElementByIdはフォームではなくdocumentのメソッドですねなんかだいぶ冗長ですしこんな感じでどうでしょう？ <script type="text/javascript"> function fchk(obj,id) { for(var i=1; i<=2; i++){ if(!obj.checked) document.getElementById(id+i).value=""; document.getElementById(id+i).disabled=!obj.checked; } } </script> <form action="#"> <input type="checkbox" id="c1" name="aaa" value="オン" onclick="fchk(this,'t')" /> <br /> <input type="text" name="aaa" id="t1" value="" size="20" disabled/> <input type="text" name="aaa" id="t2" value="" size="20" disabled/> </form>

質問者

補足 2009/01/21 10:29

早い回答ありがとうございました。簡潔でとても美しいです。しかし、もう一つ問題がありまして、今回この動作は ID指定でエリアの非表示も同時に行っております。この場合、onClick時に両方実行しているのですが、エラーが出て動作しません。単独では動作するのですが・・・。ぜひアドバイスいただけますでしょうか？ </html> <body> <script type="text/javascript"> //地図ありにチェックをいれたらマップアイテムを表示 maparea = document.getElementById('mapitem').style; //地図ありにチェックをいれたら住所入力可能 function fchk(obj,id) { for(var i=1; i<=2; i++){ if(!obj.checked) document.getElementById(id+i).value=""; document.getElementById(id+i).disabled=!obj.checked; } } </script> <form action="#"> 地図挿入の場合チェック<input type="checkbox" id="c1" name="aaa" value="オン" onClick="fchk(this,'t');maparea.display=(this.checked?'':'none')" /> <br /> 住所：<input type="text" name="aaa" id="t1" value="" size="20" disabled/> <div id="maparea" style="display:none;"> 地図が出ます。 </div> </form> </body> </html>

関連するQ&A

一つのチェックボックスでテキストフィールドとプルダウンリストを制御
現在以下のようなテキストフィールドとプルダウンがあります。 <form name="register" action="register_kakunin.php" method="post"> <input type="checkbox" name="name_check" onclick="fchk(this,1);" /> <input name="revenue" onChange="keisan()" type="text" id="revenue" size="6" readOnly="true"/> <input type="checkbox" name="chk" onclick="fchk2(this)" /> <select name="paymethod" disabled="disabled"> <option value="">Pay Method</option> <option value="cash">cash</option> <option value="card">card</option> <option value="point">point</option> <option value="coupon">coupon</option> </select> </form> これを function fchk(obj, name_check){ var frm=document.register; if(!obj.checked){ /* チェックされたら、テキストボックスを有効化 */ frm.revenue.readOnly=true; }else{ /* チェックが外されたら、テキストボックスを無効化 */ frm.revenue.readOnly=false; } } function fchk2(obj) { var frm=obj.form; var len=frm.elements.length; /* フォームの要素数 */ if(obj.checked==true){ /* チェックボックスが選択されている場合、　プルダウンを有効化（disabled=false） */ frm.elements["paymethod"].disabled=false; }else{ /* チェックボックスが選択されていない場合、　プルダウンを無効化（disabled=true） */ frm.elements["paymethod"].disabled=true; } } という2つのスクリプトで制御しているのですが、前者を操作するときには必ず後者も操作することになるため、一つのチェックボックスで2つとも制御できるようにしたいのですが、どうしたらいいのでしょうか？上記のjavascriptはネットから拾ってきたもので、自作ではありません。宜しくお願いします。
- ベストアンサー
- JavaScript
チェックボックスの表示・非表示　動作
はじめまして。初めて掲示板を利用させていただきます。javascriptを勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。 A+AB＝AB　A+AB+E=ABE　個々までは問題なし。既に全てのチェックが付いた上体で、ABCE－A＝BCE　となってしまい、 ABのチェックが入っていても、Aが消えてしまいます。以下に現在のコードを張ります。 <script type='text/javascript'>  </script> <form name='form2' action='#'> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br> <input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br> <br> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> <br> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> <br> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> <br> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </form> よろしくお願いいたします。
- ベストアンサー
- JavaScript
チェックボックスの無効化、有効化
あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。ソースは以下の通りなのですが、この場合、name属性にそれぞれ異なる番号（t1、t2、t3やc1、c2、c3）が振られている必要がありますが、これを同じnameに統一して動作させるには、どのように記述したらよいのか教えて頂けませんでしょうか？ nameのtとcを統一したいのではなく、t1、t2、t3を番号抜きのtに統一、c1、c2、c3を番号抜きのcに統一したいと思っています。 <script type="text/javascript"> function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、テキストボックスを有効化（false） */ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=""; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化（true） */ frm.elements[name+i].disabled=true; } } } </script> <form name="form2" action="#"> <label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="1" onclick="fchk2(this,'t')" checked="checked" />テキストボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="text" name="t1" value="テキストA" size="20" /> <input type="text" name="t2" value="テキストB" size="20" /> <input type="text" name="t3" value="テキストC" size="20" /> <hr /> <label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="1" onclick="fchk2(this,'c')" checked="checked" />チェックボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="checkbox" name="c1" value="1" />選択肢A<br /> <input type="checkbox" name="c2" value="1" />選択肢B<br /> <input type="checkbox" name="c3" value="1" />選択肢C </form>
- ベストアンサー
- JavaScript
java script フォームのチェックボックス入力制限について
java script フォームのチェックボックス入力制限についてどなたかお教えください。以下のコードを書き換えて、現状では1つのチェックボックスを複数にし(かつ、複数選択可にし）、チェックボックスをチェックした場合のみ「選択肢」ラジオボタンがアクティブになる仕様にしたいと考えております。サイト上で見つけたサンプルコードをいじっているのですが、何分素人なのでうまく行きません。どなたか助けていただけると助かります。よろしくお願いします。 <script type="text/javascript"> function fchk3(obj){ var frm=obj.form; var len=frm.elements.length; if(obj.checked==true){ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].disabled=false; } } }else{ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].checked=false; frm.elements[i].disabled=true; } } } } </script> <form name="form3" action="#"> <label for="chk3"><input type="checkbox" id="chk3" name="chk3" onclick="fchk3(this)" checked="checked" />このボタンのチェックを外すとラジオボタンが無効化</label><br /> <label for="chk3_r1"><input type="radio" id="chk3_r1" name="r1" />選択肢</label> </form>
- ベストアンサー
- JavaScript
selectメニューによるチェックボックスの表示・非表示
リストメニューで選択された項目がアクティブになるようなフォームを作成したいと考えています。下記コードの上部チェックボックスがselectメニューになっているようなものです。 JavaScriotに関して未熟者ですので、どなたか参考になるご意見／回答を頂けませんでしょうか？宜しくお願いいたします。 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <form name='form2' action='#'> <p id="ctr_FLAG"> <input type='checkbox' name='chk1' value='A' onclick='fchk2(this)' > Aをアクティブに<br> <input type='checkbox' name='chk1' value='A,B' onclick='fchk2(this);' > AとBをアクティブに<br> <input type='checkbox' name='chk1' value='A,B,C' onclick='fchk2(this);'> AとBとCをアクティブに<br> <input type='checkbox' name='chk12' value='A,B,C,E' onclick='fchk2(this);'> AとBとCとDをアクティブに</p> <p>=====================</p> <p id="gr_A"> <input type='checkbox' name='a1' value='1'> 選択肢A<br> <input type='checkbox' name='a2' value='1'> 選択肢A<br> <input type='checkbox' name='a3' value='1'> 選択肢A<br> </p> <p id="gr_B"> <input type='checkbox' name='b1' value='1'> 選択肢B<br> <input type='checkbox' name='b2' value='1'> 選択肢B<br> <input type='checkbox' name='b3' value='1'> 選択肢B<br> </p> <p id="gr_C"> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> </p> <p id="gr_E"> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </p> </form> </body> </html>
- ベストアンサー
- JavaScript
複数あるチェックボックスの入力チェックするには？
チェックボックスの入力チェックスクリプトを探しており、下記のようなスクリプトをネット検索で見つけました。  </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 できればこのスクリプトをベースとして使用したいと思っています。どなたかお分かりの方がいらっしゃいましたらお教え下さいませ。よろしくお願い致します。
- ベストアンサー
- JavaScript
テキストボックスを無効にすると値が取得できない
javascriptでこのようにテキストボックスを無効にしてフォームを送信するとphp側でvalueの値が取得できないのですが、入力無効にすると valueは送られないんでしょうか？ <form> <input type="text" id="sample" name="sample" value="値" /> </form> スクリプト .document.getElementById('sample').disabled = true; valueにはphpで値をセットし、それをテキストボックスで編集できないようにして値を飛ばそうとしたのですがテキストボックスのvalueの値が来てないようです。自分なりに考えたんですが、送信する瞬間だけ（submitボタンが押された時）テキストボックスを有効に戻すようにコードを書いているのですがこれ以外で何かありますか？ ---このように対処--- <form onsubmit="return disb()"> <input type="text" name="sample" value="値" /> </form> スクリプト document.getElementById('sample').disabled = true; function disb(f){ f.sample.disabled = false; }
- 締切済み
- JavaScript
複数フォームに同じnameがある場合の入力チェック
うまく入力チェックが動作せず、行き詰まっており困っております。アドバイスを頂ければ助かります。ソースは以下です。 function chkform(frm){ var mst=Array("dep","plan"); var mst_nm = Array("出発地","プラン"); var len=mst.length; for(i=0; i<len; i++){ var obj=frm.elements[mst[i]]; if(obj.type=="text" || obj.type=="textarea"){ if(obj.value==""){ alert(mst_nm[i]+"は必須入力項目です"); frm.elements[mst[i]].focus(); return false; } }else{ for(var j=0, chk=0; j<obj.length; j++){ if(obj[j].checked) chk++; } if(chk==0){ alert(mst_nm[i]+"は必須入力項目です"); return false; } } } return true; } <form name="order1" onsubmit="return chkform(this)"> <input type="radio" name="dep" value="osa" />大阪　　 <input type="radio" name="dep" value="tky">東京 <br /> <select name="plan"> <option value="">▼プランを選択▼</option> <option value="biz">出張</option> <option value="tvl">旅行</option> <option value="day">日帰り</option> </select> <br /> <input type="submit" name="btn1" value="確認"> </form> <form name="order2" onsubmit="return chkform(this)"> <input type="radio" name="dep" value="osa" />大阪　　 <input type="radio" name="dep" value="tky">東京 <br /> <select name="plan"> <option value="">▼プランを選択▼</option> <option value="biz">出張</option> <option value="tvl">旅行</option> <option value="day">日帰り</option> </select> <br /> <input type="submit" name="btn2" value="確認"> </form>
- 締切済み
- JavaScript
追加したテキストボックスとテキストエリアの数の制御
下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか？あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか？ <script type="text/javascript"> function myAdd(){ var oTR=document.createElement("tr"); var c=count("mat"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); } function count(name){ var tags=document.getElementsByTagName("input"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } return c; } var tag_num = 4; function myTextAreaAdd(){ var oTag = document.createElement("textarea"); oTag.setAttribute("name", "foo" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } </script> </head> <body><form method="post" enctype="multipart/form-data" action="check.php"> <table id="t0" border> <tbody> <tr><td><input type="text" name="mat1" value=""></td> <td><input type="text" name="qua1" value=""></td> </tr> <tr><td><input type="text" name="mat2" value=""></td> <td><input type="text" name="qua2" value=""></td> </tr> <tr><td><input type="text" name="mat3" value=""></td> <td><input type="text" name="qua3" value=""></td> </tr> <tr><td><input type="text" name="mat4" value=""></td> <td><input type="text" name="qua4" value=""></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd()"> <br /> <span id="area"> <textarea name="foo1"></textarea> <textarea name="foo2"></textarea> <textarea name="foo3"></textarea> <textarea name="foo4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd()"><br /> </form>
- 締切済み
- JavaScript
ラジオボタンの選択でチェックボックスのON/OFFを連動
ラジオボタンを選択すると、連動してチェックボックスにチェックが入れられる仕組みを作りたいのですが。本番環境ではこの仕組みを3つほど使用したいです。現在ここまでは出来ていますが、2つ・3つとこの仕組みを増やすと、動作が出来なくなってしまいます。さらに、ラジオボタンを選択するたびにチェックボックスのチェックが初期化される仕組みにしたいのですが・・・＞＜どなたか教えて頂けないでしょうか？ <html> <head> <script> window.onload=function(){ document.getElementById("deta1").onclick=function(){ detagroupDisabled(this.form,true); } document.getElementById("deta2").onclick=function(){ detagroupDisabled(this.form,true); } document.getElementById("deta3").onclick=function(){ detagroupDisabled(this.form,false); } } function detagroupDisabled(f,flg){ var objs=f.getElementsByTagName("input"); for(var i=0;i<objs.length;i++){ if(objs[i].className=="detagroup") objs[i].disabled=flg; } } </script> </head> <body> <form action="./postmail.cgi" method="post"> <input type="radio" name="FPCデータ" id="deta3" value="アリ"><label for="deta3">アリ</label> <input type="checkbox" name="FPCデータアリ" id="DXF" class="detagroup" value="DXF" disabled><label for="DXF">DXF</label> <input type="checkbox" name="FPCデータアリ" id="ガーバ" class="detagroup" value="ガーバ" disabled><label for="ガーバ">ガーバ</label> <input type="checkbox" name="FPCデータアリ" id="PDF" class="detagroup" value="PDF" disabled><label for="PDF">PDF</label> <input type="radio" name="FPCデータ" id="deta1" value="ナシ" checked><label for="deta1">ナシ</label> <input type="radio" name="FPCデータ" id="deta2" value="アリ"><label for="deta2">相談</label><br><br> <input type="radio" name="補強板" value="ナシ" checked="checked">ナシ <input type="radio" name="補強板" value="アリ">アリ <input type="checkbox" name="補強板" value="ポリイミド">ポリイミド <input type="checkbox" name="補強板" value="ポリエステル">ポリエステル <input type="checkbox" name="補強板" value="ガラエポ">ガラエポ <input type="checkbox" name="補強板" value="相談">相談<br><br> <input type="radio" name="印刷" value="ナシ" checked="checked">ナシ <input type="radio" name="印刷" value="アリ">アリ <input type="checkbox" name="印刷" value="銀シールド">銀シールド <input type="checkbox" name="印刷" value="銀ペースト">銀ペースト <input type="checkbox" name="印刷" value="銅ペースト"> 銅ペースト <input type="checkbox" name="印刷" value="シルク">シルク色 <SELECT NAME="印刷"> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> 　 </form> </body> </html>
- 締切済み
- JavaScript

複数対応できるチェックボックスONでのテキストフィールド有効化

複数対応できるチェックボックスONでのテキストフィールド有効化