• ベストアンサー

checkboxにcheckedされない

こちらで初めて質問させていただきます。 JAVASCRIPTにて、ONLOAD時に フォーム内のチェックボックスをデフォルトでONにする処理を 書いているのですが IE以外の環境で動作せず困っています。 ↓処理を行っているfunction function onload(all,tiku) { for(i = 1; i <= 47; i++){ mad=eval('document.form.m_mpref_'+formatNum(2,i)); if (all.indexOf(mad.value,0)>=0) { mad.checked = true; } } for(i = 1; i <= 10; i++){ mad=eval('document.form.m_tiku_'+formatNum(2,i)); if (tiku.indexOf(mad.value,0)>=0) { mad.checked = true; } } } function formatNum(keta, num) { var src = new String(num); var cnt = keta - src.length; if (cnt <= 0) return src; var str = new String; while (cnt-- > 0) str += "0"; return (str + src); } ↓呼び出し元 <body onload="onload('01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,19,20,16,17,18,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47','');"> フォーム内には 以下のようなINPUTが47あります <input type="checkbox" name="m_mpref_01" value="01" /> （つまりチェックボックス付きの都道府県が47あり、 その全てをONLOAD時にallにある番号の県をチェック状態にさせたいのです） IE環境では正常に動作するのですが FIREFOX NETSCAPE MACのIE で確認すると、ONLOAD時デフォルトでチェックが入っていないままの状態です。 これがなぜなのか全く分らないのです。 どなたか見当の付く方宜しければ教示下さい。

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

  • ベストアンサー
  • THX1138
  • ベストアンサー率51% (108/208)
回答No.1

関数名が重なっているのがいけないようです。 名前を変えてみてください。 アドレス欄に javascript: と打ち込むと too much recursion と出てきます。 onload 属性の中で onload という関数を呼び出していますが、その際上記コードにて定義されている関数ではなく、onload イベント関数それ自体が再度呼び出され、その内容は onload の呼び出しが書かれているのでまた onload イベント関数を実行し……と永久に続くことになります。 しまいにはギブアップして実行が止まります。

billybilly
質問者

お礼

有難うございました。ご指摘の通り関数名がonloadであることが原因でした。 確かに仰るとおりに異様に処理が長いと感じていました。

その他の回答 (1)

  • Ikonos00
  • ベストアンサー率28% (86/302)
回答No.2

function onloadを別の名前にしたらどうでしょうか？ また、以下のように記述すればonloadを使わなくても実現できるかと思います。 <input type="checkbox" name="m_mpref_01" value="01" checked />

billybilly
質問者

お礼

有難うございました。ご指摘の通り関数名がonloadであることが原因でした。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 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>

  • どうしても上手くいきません。

    <!-- function func() { var a = eval(document.price.fa.checked); var b = eval(document.price.fb.checked); var c = eval(document.price.fc.checked); var d = eval(document.price.fd.checked); var e = eval(document.price.fe.checked); var f = eval(document.price.ff.checked); var g = eval(document.price.fg.checked); var h = eval(document.price.fh.checked); var i = eval(document.price.fi.value); document.price.fprice.value = a + f +Math.round((b + c + d + e + 6500) * (50 + g)); } // --> すみません。 上の構文がどうしても上手くいきません。 計算結果が反映されません。 どこかおかしいのでしょうか。 不しつけながら宜しくお願いします。

  • 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の関数を作成していますが、ラジオボタンのValueを取得することができません。 引数指定の関数を作成して汎用的に使用したいと考えているのですが、引数を渡すと値を返してくれません。 引数の渡し方がおかしいのでしょうか？ function getRadioValue(str){ // 値を取得する関数 var check, num, value="none"; num=document.form1.str.length; for (i=0;i<num;i++) { check=document.form1.str[i].checked; if (check) value=document.form1.str[i].value; } return value; } function check(){ // 入力内容をチェックする if (getRadioValue("タイプ") == "A"){ hogehoge } : : }

  • JavaScriptで　コードを変数で指定し入力するには

    題名が少し変で分かりにくいですが 以下のようなコードを書いています <SCRIPT language="JavaScript"> function win_open(){// var cnt; var to1; var frm1; var i; cnt=25; for(i=6; i<=cnt; i++) { to1="document.hoge.koumoku" + i + ".value"; frm1="self.opener.document.hoge.koumoku" + i + ".value"; ここにto1で指定したテキストボックスに入れる = eval(frm1); } } </SCRIPT> 親から　子を開いて　子のスクリプトで 子のフォームへ親の値を代入したいのですが ２５項目あるので　２５行書くのもスマートでないから for文でやってみようと思ったのですが 親から値を取る方はeval関数でうまく取得できたのですが このフォーム内のテキストボックスに書く場合 eval関数だと　戻り値を指定するのだから エラーが返ってきます。 かといって　document.hoge.koumoku" + i + ".value = eval(frm1); では構文エラーになってしまいました 何か他に関数があるのかよく分からないので 教えて頂けたらと思っています よろしくお願いします

  • 大量の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
  • チェックを入れて文字を表示する

    javascript初心者です。あつかましい質問で申し訳ありません。 他のページのサンプルを参考にしてチェックを入れた時はにチェックを入れると文字が表示されるチェックボックスを作成しました。更にチェックはひとつしか出来ないというjavascriptも拾ってきて組み合わせたのですが、チェックを付けてとなりにチェックを入れた時はじめに表示された文字が消えません。教えてください。 <script type="text/javascript"> var before = null; function test(e) { var tgt = e.srcElement ? e.srcElement: e.target; if (before == tgt && tgt.checkd == true) { tgt.checked = true; } else { var chks = document.getElementsByName('chkgroup'); for (var i = 0; i < chks.length; i++) { if (chks[i] != tgt) chks[i].checked = false; } } before = tgt; } <!-- function output(){ var str=""; var chkboxes=document.getElementsByName("chkgroup"); for(var i=0;i<chkboxes.length;i++){ var obj=chkboxes[i]; if (obj.checked){//チェックされていたらstrにvalue属性の文字列を追加する str+=obj.value; } } document.getElementById("result").innerHTML=str; } window.onload=function(){ var chkboxes=document.getElementsByName("chkgroup");//チェックボックス(chkgroup)を配 列で取得 for(var i=0;i<chkboxes.length;i++){//ループでチェックボックス全てにイベントハンドラを 設定 chkboxes[i].onclick=output; } }; //--> </script> <title>sample</title> <body> <form id="SAMPLE" action="#" onclick="test(event);"> <label for="chk1"><input name="chkgroup" id="chk1" type="checkbox" value="0">Item1</label> <label for="chk2"><input name="chkgroup" id="chk2" type="checkbox" value="1">Item2</label> <label for="chk3"><input name="chkgroup" id="chk3" type="checkbox" value="2">Item3</label> </form> <p id="result">ここに表示されます。</p> </body>

  • checkbox必須チェック

    function hissuCheck(form) { var paramArray = Array("…24個"); var alrtArray = Array("…24個"); var len = paramArray.length; for(i=0; i<len; i++) { var obj = form.elements[paramArray[i]]; if(obj.type == "text") { if(obj.value == "") { alert(alrtArray[i]+"は必須入力です"); form.elements[paramArray[i]].focus(); return false; } } else if(obj.type == "select-one" || obj.type == "select-multi") { for(varSelected=0, j=0; j<obj.options.length; j++) { if(obj.options[j].selected)varSelected+=obj.options[j].value; } if(varSelected == 0) { alert(alrtArray[i]+"は必須入力です"); form.elements[paramArray[i]].focus(); return false; } } else { for(varChecked=0, k=0; k<obj.length; k++) { if(obj[k].type == "checkbox") { if(obj[k].checked)varChecked++; } } if(varChecked == 0) { alert(alrtArray[i]+"は必須入力です"); return false; } } } return true; } 必須チェックですが、最後のチェックボックスだけがチェックしても「…は必須です」とアラートが表示されてしまいます。どうか宜しくお願いします

  • drawImageの描画順序の指定について

    いつもお世話になっております。 drawImageメソッドを使用し、Canvasへ画像を描画するプログラムを作成しています。 画像は全部3枚あり、座標をずらしてすべて重ねて表示します。 画像のファイルサイズはすべて異なります。 画像描画のタイミングは選択中のセレクトボックスの項目に変更があった場合です。 この際、フォームの情報によって描画順序を決定します。 本題ですが、現在のコーディングですと、指定した描画順序のとおりに描画されません。 複数の画像に対してonloadを使用しており、画像の読み込みが完了した順番に描画 されているような気がします。指定したとおりに描画できる方法はないでしょうか？ ・html <canvas id=main width=160 height=160 style=border:1px solid gray></canvas> <form> <hr> 描画順序 <select name=order onChange=Main(this.form)> <option value=0>1,2,3</p> <option value=1>1,3,2</p> <option value=2>2,1,3</p> <option value=3>2,3,1</p> <option value=4>3,1,2</p> <option value=5>3,2,1</p> </select> </form> ・外部ファイル(js) function Main(f) { var canvas = document.getElementById('main'); if (!canvas || !canvas.getContext) { return false; } var Canvas = canvas.getContext('2d'); Canvas.clearRect(0, 0, 320, 240); var Image1 = new Image(); var Image2 = new Image(); var Image3 = new Image(); if (f.order.value == 0) { Image1.onload = function() { Canvas.drawImage(Image1, 0, 0); } Image2.onload = function() { Canvas.drawImage(Image2, 20, 20); } Image3.onload = function() { Canvas.drawImage(Image3, 40, 40); } Image1.src = GetImageFileName(1); Image2.src = GetImageFileName(2); Image3.src = GetImageFileName(3); } else if (f.order.value == 1) { Image1.onload = function() { Canvas.drawImage(Image1, 0, 0); } Image3.onload = function() { Canvas.drawImage(Image3, 20, 20); } Image2.onload = function() { Canvas.drawImage(Image2, 40, 40); } Image1.src = GetImageFileName(1); Image3.src = GetImageFileName(3); Image2.src = GetImageFileName(2); } else if (f.order.value == 2) { Image2.onload = function() { Canvas.drawImage(Image2, 0, 0); } Image1.onload = function() { Canvas.drawImage(Image1, 20, 20); } Image3.onload = function() { Canvas.drawImage(Image3, 40, 40); } Image2.src = GetImageFileName(2); Image3.src = GetImageFileName(3); ：（以降省略） よろしくお願いいたします。

  • 教えてください！

    セレクトボックスが3つあります。 1つめのセレクトボックスがid=select1 2つめのセレクトボックスがid=select2 3つめのセレクトボックスがid=select3 valueはそれぞれ異なりますが0～3か0～5といった具合です。 全てのセレクトボックスのうち1つでもvalueが0(未選択)のものがあれば処理を中止し そうでなければ何か処理をするという分岐がしたいのですがうまくいきません。 具体的には、全てのセレクトボックスのvalueを0以外にしても$(this).val() == "0"がtrueに なってしまいます。どのようにすれば分岐できますでしょうか？ ソースは以下の通りです。 $(function() { var cnt = 4; var status = false; for (var i = 1; i < cnt; i++) { $("select#item" + i).change(function() { var str = ""; $("select option:selected").each(function() { status = true; if ($(this).val() == "0") { status = false; $(".res").html('値に0がある'); } str += $(this).val(); }); }); } if (status) { //全てのセレクトボックスでvalueが0でなければ何かする alert(str); } });

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する