[javascript]radioボタンの必須チェック(n個分)別解

昨日、t.sato君からコメントをもらいました。

複数の場合って分岐するのがダルかったら、引数にオブジェクトを受け取るんじゃなくて、引数はStringで受け取って、

確かに、実装している時に、引数にオブジェクトを受け取るのが気持ち悪くて、何とか、Stringで受け取れないかとちょっと考えたのですが、なかなか思い浮かばなく。。。

そこで、またしてもコメントを参考にしてちょっと変更してみる。

<input type="radio" name="hoge" value="1">test_01 <input type="radio" name="hoge" value="2">test_02 <input type="radio" name="hoge" value="3">test_03 <input type="button" value="run" onclick="lf_checkRadio('hoge');" > <script type="text/javascript"> function lf_checkRadio(aObjName){ var ret = (function(){ var temp_obj = document.getElementsByName(aObjName); var input_length = temp_obj.length; /* radioボタンが一個の場合 */ if(input_length == 1){ /* チェックがついている場合 */ if(temp_obj.checked){ return true; /* チェックがついていない場合 */ }else{ return false; } /* radioボタンが複数ある場合 */ }else{ /* radioボタンの数だけループ */ for(var i=0; i<input_length; i++){ /* 一回でもついている場合は、その場でtrueを返す */ if(temp_obj[i].checked){ return true; } } /* チェックがついていない場合 */ return false; } }()); /* チェックがついていない場合 */ if(!ret){ alert("チェックが入っていません"); /* 以下、チェックがついていない場合の処理を追加 */ /* ・・・・ */ return false;/* チェックがついている場合 */ }else{ alert("チェックが入っています。"); /* 以下、チェックがついている場合の処理を追加 */ /* ・・・・ */ return true; } } </script>

ここでの変更点は、引数がObjectからStringに変更されたこと。

あとは、引数を受け取った後、document.getElementsByNameで処理を行うので、formタグとwithを使う必要がなくなったこと。

で、実際に実行してみると、複数の場合は、うまくいったのですが、ラジオボタンが1個の場合、うまくいきませんでした。

なぜかなーと思って、試しに、「temp_obj.checked」を「temp_obj[0].checked」と変えるとうまくいきました。

ってか、Objectが1個しかない場合でも、[0]と配列表示しないといけないんだー。
これは以外でした。
formから1個のラジオボタンにアクセスするときは、[0]をつけなくてもできたので。

というわけで、変更後のソースはこちら。

<input type="radio" name="hoge" value="1">test_01 <input type="radio" name="hoge" value="2">test_02 <input type="radio" name="hoge" value="3">test_03 <input type="button" value="run" onclick="lf_checkRadio('hoge');" > <script type="text/javascript"> function lf_checkRadio(aObjName){ var ret = (function(){ var temp_obj = document.getElementsByName(aObjName); var input_length = temp_obj.length; /* radioボタンが一個の場合 */ if(input_length == 1){ /* チェックがついている場合 */ if(temp_obj[0].checked){ return true; /* チェックがついていない場合 */ }else{ return false; } /* radioボタンが複数ある場合 */ }else{ /* radioボタンの数だけループ */ for(var i=0; i<input_length; i++){ /* 一回でもついている場合は、その場でtrueを返す */ if(temp_obj[i].checked){ return true; } } /* チェックがついていない場合 */ return false; } }()); /* チェックがついていない場合 */ if(!ret){ alert("チェックが入っていません"); /* 以下、チェックがついていない場合の処理を追加 */ /* ・・・・ */ return false;/* チェックがついている場合 */ }else{ alert("チェックが入っています。"); /* 以下、チェックがついている場合の処理を追加 */ /* ・・・・ */ return true; } } </script>

でも、これもっと簡略することができて、最終的には、下のソースで落ち着きました。

<input type="radio" name="hoge" value="1">test_01 <input type="radio" name="hoge" value="2">test_02 <input type="radio" name="hoge" value="3">test_03 <input type="button" value="run" onclick="lf_checkRadio('hoge');" > <script type="text/javascript"> function lf_checkRadio(aObjName){ var ret = (function(){ var temp_obj = document.getElementsByName(aObjName); var input_length = temp_obj.length; /* radioボタンの数だけループ */ for(var i=0; i<input_length; i++){ /* 一回でもついている場合は、その場でtrueを返す */ if(temp_obj[i].checked){ return true; } } /* チェックがついていない場合 */ return false; }()); /* チェックがついていない場合 */ if(!ret){ alert("チェックが入っていません"); /* 以下、チェックがついていない場合の処理を追加 */ /* ・・・・ */ return false;/* チェックがついている場合 */ }else{ alert("チェックが入っています。"); /* 以下、チェックがついている場合の処理を追加 */ /* ・・・・ */ return true; } } </script>

ものすごくソースがきれいになりました。

やっぱ、これの方が引数もStringだし、中のソースもさっぱりしていいなー♪
t.sato君サンクス！！