- 締切済み
checkbox ループ
下記のスクリプトだと、 デバックが１６になってしまいます。 これをどうにかして、 ＡをチェックしたらＡ内だけをループ、 ＢをチェックしたらＢ内だけをループさせたいんですが、 どこをどのように修正すればいいですか？？ スクリプトをかなり変えるのは避けたいです。。 教えてください。。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> <SCRIPT language="JavaScript"> function check(n){ document.getElementById('debug').innerHTML = "デバッグ情報"; document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + "<br>lengthは" + document.form1.length; for(i=1; i<=document.form1.length; i++){ if(document.form1.elements["ch" + n].checked){ document.form1.elements["ch" + n + "-" + i].checked = true; document.form1.elements["ch" + n + "-" + i].disabled = true; }else{ document.form1.elements["ch" + n + "-" + i].checked = false; document.form1.elements["ch" + n + "-" + i].disabled = false; } } } </SCRIPT> </HEAD> <BODY> 全てのチェックボックスをチェック/解除 <FORM name="form1"> <p><INPUT type="checkbox" id="ch1" onclick="check(1)">チェックＡ</p> <INPUT type="checkbox" id="ch1-1">チェック１ <INPUT type="checkbox" id="ch1-2">チェック２ <INPUT type="checkbox" id="ch1-3">チェック３<BR><BR> <INPUT type="checkbox" id="ch1-4">チェック４ <INPUT type="checkbox" id="ch1-5">チェック５ <INPUT type="checkbox" id="ch1-6">チェック６<BR><BR> <BR> <p><INPUT type="checkbox" id="ch2" onclick="check(2)">チェックＢ</p> <INPUT type="checkbox" id="ch2-1">チェック１ <INPUT type="checkbox" id="ch2-2">チェック２ <INPUT type="checkbox" id="ch2-3">チェック３ <INPUT type="checkbox" id="ch2-4">チェック４<BR><BR> <INPUT type="checkbox" id="ch2-5">チェック５ <INPUT type="checkbox" id="ch2-6">チェック６ <INPUT type="checkbox" id="ch2-7">チェック７ <INPUT type="checkbox" id="ch2-8">チェック８<BR><BR> <BR> </FORM> <p id="debug"></p> </BODY> </HTML>
- ke---ta
- お礼率11% (3/27)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
document.form1.lengthはform1内のエレメントを数えますので常に16になります。 その数（=16）に対して処理をしているので、ch1-7やch1-8に対しても処理を行うこととなり、ここでエラーが発生しています。 （ブラウザによってはエラーとせず無視するだけの場合もあり。） 無理やり、ご質問のスクリプトに似せて作るならこんなところでしょうか？ （と言っても、だいぶ変わって見えるかも・・・） function check(n){ var cnt=0; var e; var flg=document.form1.elements['ch' + n].checked; for(i=1; i<=document.form1.length; i++){ if (e=document.form1.elements['ch' + n + '-' + i]) { e.checked = flg?true:false; e.disabled = flg?true:false; cnt++; } } document.getElementById('debug').innerHTML = 'デバッグ情報<br>対象数は' + cnt; } いずれにしろ、全部のelement（=16）に対してループしているので、「無駄にループ」しているところは変わってません。（指定方法をもとのロジックと同様の方法にしているので…） 必要最小限のループで行いたいのなら、No.1様の回答にあるようにグルーピングしておくのがよろしいかと思われます。 そうすれば、対象数をlengthでも取得可能になるし、、各タグにいちいちidを振る必要もなくなるでしょう。 （formで送信するときにnameはいるけど、disabledにしてるし・・・どういう使い方なのかよくわかりませんが。）
- yambejp
- ベストアンサー率51% (3827/7415)
元ソースがかなりいけてませんが、ホントにこのままやりたいのですか？ 名前をつかってやるのはミスの元なのでいつか破たんすると思いますよ。 しかもidとnameを混同しているみたいですし・・・ ＞ＡをチェックしたらＡ内だけをループ、 ＞ＢをチェックしたらＢ内だけをループさせたいんですが、 ＞どこをどのように修正すればいいですか？？ グルーピングされていないので、いまのままではなんともなりません。 idをつかってやるのであれば正規表現などでいけるかもしれませんが・・・ また、 ＞ "<br>lengthは" + document.form1.length; これってたんにform1にある要素数を返すだけですから16で間違い ないですが・・・ チェックされている数を知りたいということですか？
関連するQ&A
- javascript checkbox
完全に初心者です。。 下記のスクリプトをもとに、 ■チェックAをチェックしたら全てチェックされる ■またチェックAをチェックしたら全て外れる ようにしたいです。。 でも何がダメか分かりません。。 一部を書くのではなく出来ればスクリプト全ていただけたらと思います。 あともし宜しければチェックAをチェックしたら、１～６をチェックできないようにもしたいです。。 ご教授よろしくお願いします。。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> <SCRIPT language="JavaScript"> function check(){ for(i=1; i<7; i++){ document.form1.elements[ch[i]].checked = true; } } </SCRIPT> </HEAD> <BODY> 全てのチェックボックスをチェック/解除 <FORM name="form1"> <p><INPUT type="checkbox" id="ch" onclick="check()">チェックＡ</p> <INPUT type="checkbox" id="ch1">チェック１ <INPUT type="checkbox" id="ch2">チェック２ <INPUT type="checkbox" id="ch3">チェック３<BR><BR> <INPUT type="checkbox" id="ch4">チェック４ <INPUT type="checkbox" id="ch5">チェック５ <INPUT type="checkbox" id="ch6">チェック６<BR><BR> <BR> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 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ではない！」 どうか教えて下さい。よろしくお願いします。
- ベストアンサー
- JavaScript
- [javascript] checkboxによる合計の算出と表示について
こんにちわ。 表記についてですが、javascriptによるcheckboxのvalue値を算出させようと悪戦苦闘しております・・・。 皆様のお知恵を拝借できればと思います。 至らない部分が多々あると思いますが下記に現在のソースを貼り付けますので、色々とご指摘いただければ幸いです。 （リアルタイム表示のためprototypeを使用しています。） <head><script src="prototype.js" type="text/javascript"></script> <script language="javascript"> function mprice(){ chn = 6; ttl = 0; for(i=0; i<chn; i++) { if(document.step2.elements[i].checked==true) { var pttl = ttl + eval(document.step2.elements[i].value); } else if(typeof(pttl) == "undefined") pttl = 0; } document.getElementById('pttlr').innerHTML = pttl + "円" } </script> </head> <body> <form name="step2"> <input type="checkbox" value="105" id="food" onClick="mprice()">コーラ<br /> <input type="checkbox" value="315" id="food" onClick="mprice()">肉<br /> <input type="checkbox" value="1050" id="book" onClick="mprice()">参考書<br /> <input type="checkbox" value="210" id="sweet" onClick="mprice()">飴<br /> <input type="checkbox" value="525" id="book" onClick="mprice()">マンガ<br /> <input type="checkbox" value="3150" id="music" onClick="mprice()">CD<br /> </form> <div id="pttlr">
- ベストアンサー
- JavaScript
- ＣｈｅｃｋＢｏｘの入力チェックについて
CheckBoxの入力チェックについて CheckBoxの数は可変です。 全て未チェックのときにalertを表示したいです。 今はチェックしてもalertが表示されてしまいます。 よろしくお願いします。 <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>チェックボックス入力チェック</title> <SCRIPT TYPE="text/javascript"> <!-- function item_check() { count = 0; for (i=0;i<=document.form1.elements['item[]'][i].length;i++){ if(document.form1.elements['item[]'][i].checked){ count++; } } if(count==0){ alert("項目を選択してください。"); return(false); } return(true); } --> </SCRIPT> </head> <body> <form name="form1" method="POST" action="test.htm" onSubmit="return item_check()"> <p><input type="checkbox" name="item[]" value="1">項目1</p> <p><input type="checkbox" name="item[]" value="2">項目2</p> <p><input type="checkbox" name="item[]" value="3">項目3</p> <p><input type="checkbox" name="item[]" value="4">項目4</p> <p><input type="checkbox" name="item[]" value="5">項目5</p> <input type="submit" name="kakunin" value="確認"> </form> </body> </html>
- ベストアンサー
- JavaScript
- checkboxの選択数制限と排他処理について
javascript初心者です。よろしくお願い致します。現在チェックボックスを使用したクイズサイトを作成しており、回答が５つの中から正しいものをチェックし送信するというものです。 その中で、正解数（今回は2つ）以上にチェックをした時に最初にチェックした方のチェックボックスのチェックが外れるという仕組みを組み込む事になりました。 選択数に制限をかけることや排他処理（ラジオボタン）は理解できるのですが、上記の実現方法がどうしても分からず質問させていただきました。 どうかよろしくお願い致します。 <html> <head> <script type="text/javascript"> function check(f,o,m){ var c = i = 0, b = f.elements; for (i; i < b.length; i++) if(b[i].type&&b[i].type=='checkbox'&&b[i].checked&&b[i].parentNode.id==o) c++; for (i = 0; i < b.length; i++) if(b[i].type&&b[i].type=='checkbox'&&!b[i].checked&&b[i].parentNode.id==o) b[i-2].checked=false;// これだと２つ前ではなく2番目のチェックボックスが排他になります。 } </script> </head> <body> <form action="#" id="sampleform" onclick="check(this,'options',2);"> <fieldset id="options"><input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> <input type="checkbox" name="" value=""><br> </fieldset> </form> </body> </html>
- ベストアンサー
- JavaScript
- localStorageでのcheckbox制御
下記記載のプログラムをこちらから改変して作成しました。 http://jsdo.it/twi_masa/hx8D 質問1 保存を押すとtrueかfalseの値が保存されますが、ページ読み込み直後にtrueだったらチェックあり。falseだったらチェックなしの状態にするにはどのように書けばよろしいでしょうか。 質問2 チェックボックス2も1と同様に使いたいのですが、どのように書けばよいのかわかりません。 よろしくお願いします。 <table> <tr> <td>チェックボックス</td> <td> <input type="checkbox" id="checkbox1" value="0">チェック1 <input type="checkbox" id="checkbox2" value="0">チェック2 </td> </tr> </table> <input type="button" value="保存" onclick="hx8D.save();"> <script> var hx8D = function(){ var HX8D = function(){ }; HX8D.prototype = { save : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ localStorage[key] = elements[i].value; }else if(type == "checkbox"){ localStorage[key] = elements[i].checked; document.getElementsByName("checkbox1")[i].checked = true; } } }, }; return new HX8D(); }(); </script>
- ベストアンサー
- JavaScript
- チェック出来る数を制限&チェックされない場合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"> 上記を同時に満たしたいというのが今回の質問の趣旨です。
- ベストアンサー
- JavaScript
- JavaScriptでcheckboxの入力個数制限
以下のようなチェックボックスがあります。 ３つ以上チェックできないようにしたいのですが、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>
- ベストアンサー
- JavaScript
- checkboxを全てcheckを画像ボタンで
一つのフォームの中に、複数のcheckboxのグループがあって そのグループ毎に、全てチェック、解除ボタンをつけているのですが それを画像のボタンで実現したいのですが、どのようにしたらいいでしょうか？ *通常のボタンでは動作していますが、画像をボタンにした時に動作しません。 チェックを入れて、その場面にとどまって欲しいのに 画像で作るとチェックを入れて、検索してしまいます。 以下、現在と、画像ボタンのうまく動かないものも書いています。 よろしくお願いいたします。 <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn1 = new Array("bukken_ID[1]","bukken_ID[2]"); // 全てのチェックボックをチェックする function chBxOn1(){ for(i=0; i<chn1.length; i++) { document.nForm.elements[chn1[i]].checked = true; } } // 全てのチェックボックのチェックを外す function chBxOff1(){ for(i=0; i<chn1.length; i++) { document.nForm.elements[chn1[i]].checked = false; } } //--> </SCRIPT> <SCRIPT language="JavaScript"> <!-- // チェックボックスに使用している名前 chn = new Array("ku_area[1]","ku_area[2]"); // 全てのチェックボックをチェックする function chBxOn2(){ for(i=0; i<chn2.length; i++) { document.nForm.elements[chn2[i]].checked = true; } } // 全てのチェックボックのチェックを外す function chBxOff2(){ for(i=0; i<chn2.length; i++) { document.nForm.elements[chn2[i]].checked = false; } } //--> </SCRIPT> <form id="form2" name="nForm" method="post" action="#"> <input type="checkbox" name="bukken_ID[1]" id="bukken_ID" value="1" /> マンション <input type="checkbox" name="bukken_ID[2]" id="bukken_ID" value="2" /> 一戸建て <input type="button" value="全てチェックを入れる" onclick="chBxOn1()" /> <input type="button" value="チェック解除" onclick="chBxOff1()" /> <input type="checkbox" name="ku_area[1]" id="ku_area" value="1"/>住所１ <input type="checkbox" name="ku_area[2]" id="ku_area" value="2"/>住所２ <input type="button" value="全てチェックを入れる" onclick="chBxOn2()" /> <input type="button" value="チェック解除" onclick="chBxOff2()" /> <input type="submit" name="button3" id="button3" value="以上の条件で検索" /> </form> 以下、うまく動かない画像のボタンです。 <input type="image" src="img/allcheck1.gif" alt="全てチェックを入れる" onClick="chBxOn1()"> <input type="image" src="img/riset.gif" alt="チェック解除" onClick="chBxOff1()">
- ベストアンサー
- JavaScript
- localStorageでのcheckbox制御
下記サイトを参考に、テキストボックスとチェックボックスをlocalStorageに保存するプログラムを作ってみました。 http://jsdo.it/twi_masa/hx8D 質問ですが、チェックやテキストを書いて保存ボタンを押すとlocalStorageに値が保存されることはchromeのデベロッパーツールで確認しました。 値がある状態でロードを押すとその保存された状態に復元されますが、それをロードボタンを押さずにページが読み込まれた直後に表示させる方法が知りたいです。 window.onload = function(){ 処理 } だと思い、 load : functionをwindow.onload = functionへ単純に変更しましたが、それでは保存もロード出来なくなってしまいました。 自分では全く書けないので、出来ましたらソースを書いていただけるとありがたいです。 よろしくお願いします。 <table> <tr> <td>テキスト</td> <td><input type="text" id="text1" /></td> </tr> <tr> <td>チェックボックス</td> <td> <input type="checkbox" id="checkbox1" value="0">チェック1 <input type="checkbox" id="checkbox2" value="0">チェック2 </td> </tr> </table> <input type="button" value="保存" onclick="hx8D.save();"> <input type="button" value="ロード" onclick="hx8D.load();" /> <script> var hx8D = function(){ var HX8D = function(){}; HX8D.prototype = { save : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ localStorage[key] = elements[i].value; }else if(type == "checkbox"){ localStorage[key] = elements[i].checked; } } }, load : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ elements[i].value = localStorage[key]; }else if(type == "checkbox"){ elements[i].checked = localStorage[key] == "true" ? true : false; } } }, }; return new HX8D(); }(); </script>
- ベストアンサー
- JavaScript
補足
はい・・・このままのスクリプトでお願いしたいです・・・ Ａをチェックした時に１６ではなく６、 Ｂをチェックしたときは８にしたいのです。。 無駄にループさせたくないんです。 言ってる意味わかりますか？ うまく言えなくてすいません。。