javascriptの基本だと思うのですが、煮詰まってしまいました。例のようにForm内に複数あるラジオボタンの状態を取得、設定したいのです。


<script type="text/javascript"><!--
function changeBtn(){
switch (document.myForm.getElementById("btn1").valeu){
case 0:
document.myForm.getElementById("btn1").valeu="1";
break;
case 1:
document.myForm.getElementById("btn1").valeu="2";
break;
}
}
// --></script>
<FORM name="myForm">
<P>
<INPUT type="radio" checked name="btn1" value="0">
<INPUT type="radio" name="btn1" value="1">
<INPUT type="radio" name="btn1" value="2">
<INPUT type="button" name="ninjahenkou" value="変更" onClick="changeBtn()">
</P>
としてみましたが、これでは文法エラーになります。DOMによる正しい書き方を教えてください。





回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/09/07 02:13:23
  • 終了:2007/09/08 00:08:02

回答(3件)

id:KUROX No.1

KUROX回答回数3542ベストアンサー獲得回数1402007/09/07 03:17:00

ポイント27pt

動作確認はXP SP2/IE6で行いました。

・getElementByIdの使い方が違う

・valeuのつづりがvalue

・Case ところは'0'のように括らないと駄目

以下のように書き直してみましたが、2回目以降の動作が

おかしいようです。alertはデバッグ目的で入れてます。

<script type="text/javascript">

<!--

function changeBtn(){

switch (document.getElementById("btn1").value){

case '0':

document.getElementById("btn1").value='1';

alert(document.getElementById("btn1").value);

break;

case '1':

document.getElementById("btn1").value='2';

alert(document.getElementById("btn1").value);

break;

}

}

// -->

</script>

<FORM name="myForm">

<P>

<INPUT type="radio" checked name="btn1" value="0">

<INPUT type="radio" name="btn1" value="1">

<INPUT type="radio" name="btn1" value="2">

<INPUT type="button" name="ninjahenkou" value="変更" onClick="changeBtn()">

</P>

で、処理内容を見るだけだと、Javascript必要ないのでは?

この処理で駄目なら、Javascriptをもう少しみてみますが・・。

<FORM name="myForm">

<P>

<INPUT type="radio" checked name="btn1" value="1">

<INPUT type="radio" name="btn1" value="2">

<INPUT type="radio" name="btn1" value="2">

<INPUT type="button" name="ninjahenkou" value="変更" onClick="changeBtn()">

</P>


http://q.hatena.ne.jp/answer

id:mouitchou

じつは値をひとつ取得・設定できれば、何十個並べても同じパターンでできるだろうと、1セットだけ書いて質問しました。その際、スペルミスしてしまいました。

まるまるコピーペーストしましたが、結果は2回だけalert(1と2)が出て、あとは無反応になりました。また、ラジオボタンのチェックが1へも2へも移動しませんでした。getElementByIdが1~2回だけ効いているのが不思議です。

2007/09/07 13:21:32
id:Yota No.2

Yota回答回数453ベストアンサー獲得回数282007/09/07 09:05:46

ポイント27pt

<html>

<head>

<script type="text/javascript">

function changeBtn(){

var val = '' ;

for(var i = 0 ; i < document.myForm.btn1.length ; i++) {

if(document.myForm.btn1[i].checked) {

val = document.myForm.btn1[i].value ;

}

}

// alert(val) ;

switch (val){

case '0': document.myForm.btn1[1].checked = true ; break;

case '1': document.myForm.btn1[2].checked = true ; break;

}

}

</script>

</head>

<body>

<form name="myForm">

<p>

<input type="radio" name="btn1" value="0" checked="checked"/>

<input type="radio" name="btn1" value="1" />

<input type="radio" name="btn1" value="2" />

<input type="button" name="ninjahenkou" value="変更" onClick="changeBtn()" />

</p>

</form>

</body>

</html>

http://dummy.com/

id:mouitchou

ありがとうございます。

これだと、たしかに目的の動作をさせることができました。

ただ、できましたらgetElementByIdとかgetElementsByNameとかを使ってやりたいのです。縦にたくさん同様なボタンのセットを表示するつもりなので、その方が、PHP内で色々汎用性をもたせられそうな気がするものですから。

さらにいえば、いずれ(二次元)配列をこれに組み合わせたいと希望しています。

2007/09/07 13:29:49
id:Yota No.3

Yota回答回数453ベストアンサー獲得回数282007/09/07 14:03:09

ポイント26pt

むりやりDOMらしくすると、こんなかんじでしょうか。

<html>

<head>

<script type="text/javascript">

function changeBtn(){

var val = '' ;

var radioAry = document.getElementsByTagName('input') ;

for(var i = 0 ; i < radioAry.length - 1 ; i++) {

if(radioAry[i].checked) {

val = radioAry[i].value ;

}

}

// alert(val) ;

switch (val){

case '0': document.getElementById('bt1').checked = true ; break;

case '1': document.getElementById('bt2').checked = true ; break;

}

}

</script>

</head>

<body>

<form name="myForm" id="myFrom">

<p>

<input type="radio" name="btn1" id="bt0" value="0" checked="checked"/>

<input type="radio" name="btn1" id="bt1" value="1" />

<input type="radio" name="btn1" id="bt2" value="2" />

<input type="button" name="ninjahenkou" value="変更" onClick="changeBtn()" />

</p>

</form>

</body>

</html>

http://dummy.com/

id:mouitchou

目的通り、値の取得と設定ができます。

どうやらnameを同じに、idを異なるものにすることと、プロパティをcheckedにすることが

ポイントなのですね。

これでしばらく進めてみます。どうもありがとうございました。

2007/09/07 14:45:19
  • id:Mook
    Yota さんのやっている手順のように、checked の確認処理が必要ですね。
  • id:mouitchou
    Yotaさんに教えて頂いた方法を少し改良して、多数のボタンを一括してCheckできるようになりました。PHPのコードだと、
    //---------------------------------------------
    echo <<<JSPEND
    <script type="text/javascript"><!--
    function all_check(id_no){

    //フォームを特定
    tgtForm = document.getElementById('MyForm');

    btns = tgtForm.getElementsByTagName('INPUT');//フォーム内のボタンリストを取得
    for(i = 0; i < btns.length; i++){; //順次スキャン
    idd = btns[i].id;
    if (idd.substr(0,1) ==id_no){ //同じnameのボタン群を特定し、IDの左端数字で識別。一致したとき
    btns[i].checked = true; //セットしたいボタンのCheckedを変更
    }
    };
    }
    // --></script>
    JSPEND;
    //------------------------------------------
    echo " <TD align=\"center\"><INPUT type=\"button\" name=\"RWALL\" value=\"押\" onClick=\"all_check('0')\"></TD>\n";
    //------------------------------------------
    みたいな方法です。冗長かもしれませんが、これで無事に動きました。
  • id:mouitchou
    //同じnameのボタン群を特定し
    はうそでしたね。削除願います。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません