チェックボックスのvalue取得方法

2011/12/15 00:20

このQ&Aのポイント

チェックボックスのvalueを取得する方法には、タイプ１とタイプ２があります。タイプ１では、select要素の専用のメソッドを使用して取得します。タイプ２では、checkboxのvalue属性を直接取得する方法を使用します。
タイプ１では、select要素のオプションを操作するための専用のメソッドが用意されています。一方、タイプ２では、checkboxのvalue属性を直接取得するための方法を使用します。
タイプ１とタイプ２の目的は同じですが、どちらの書き方が良いかは状況によります。タイプ１は柔軟な操作が可能であり、タイプ２はシンプルで短いコードで済む利点があります。一般的には、タイプ１を使用するサイトが多いです。

チェックボックスのvalueの取得方法タイプ１と２

質問１　）） select要素の選択されたoption要素のvalueを取得する方法はタイプ１のように専用のものが用意されていますが、チェックボックスの場合もそれ専用のものはありますか？質問２　））タイプ２ではチェックボックスの<input value=～>のvalueを取得することができましたが、タイプ１では取得することができませんでした。正しいと思うのですが、なぜでしょうか。質問３　））タイプ１とタイプ２の目的は同じですが、どちらの書き方の方が良いでしょうか。タイプ２のほうがシンプルで短くよさそうなのですが、多くのサイトではタイプ１を使っているところが多いようです。ちなみに、サンプルでは１つ１つ直接書くやり方をしていますが、実際は配列を使って複数のselect要素やチェックボックスのvalueを取得するつもりです。 <!DOCTYPE　html　PUBLIC　"-//W3C//DTD　XHTML　1.0　Transitional//EN"　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html　xmlns="http://www.w3.org/1999/xhtml"　xml:lang="ja"　lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form> <select name="aaa" onchange="cd(this.form)"> <option value="A1"></option> <option value="A2"></option> <option value="A3"></option> </select> <ul id="uli"> <li><input type="checkbox" name="bbb" id="b_1" onchange="cd(this.form)" value="B1" /><label for="b_1"></label></li> <li><input type="checkbox" name="bbb" id="b_2" onchange="cd(this.form)" value="B2" /><label for="b_2"></label></li> <li><input type="checkbox" name="bbb" id="b_3" onchange="cd(this.form)" value="B3" /><label for="b_3"></label></li> </ul> </form> <script type="text/javascript"> //　タイプ１ function cd(r) { var slt = r.elements["aaa"].options[r.elements["aaa"].selectedIndex].value; alert(slt); var chk = document.getElementById('uli').children; for(i=0,len=chk.length; i<len; i++){ if(chk[i].checked == true){ alert(chk[i].nodeValue); } } } //　タイプ２ function cd(r) { var slt = r.aaa.value; alert(slt); var chk = r.bbb; for(i=0,len=chk.length; i<len; i++){ if(chk[i].checked == true){ alert(chk[i].value); } } } </script> </body> </html>

kiseki777
お礼率80% (211/261)

JavaScript
回答数2
ありがとう数2

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

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

ベストアンサー

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

2011/12/15 14:28 回答No.2

>ただ、一点気になったところがあります。 >>おなじnameのチェックボックスを使用していますが、名前の競合を >>起こしていますね。あまりよい使い方とは思えませんねえーと、受け取ったサーバー側のプログラムの仕組みによります。たとえばPHPなどで処理するなら <input type="checkbox" name="bbb[]"> のようにしておくだけで、競合せずに配列として受け取ることができます。サーバーにデータを送信しないならあまり気にする必要はありません。逆にjavascriptとしては同じnameにすると、確かにグルーピングする手間はへりますただアクセシビリティは落ちるので個人的には使いづらいと思います

質問者

お礼 2011/12/21 23:36

他のプログラムでは問題がでてくることがあるのですね。参考になりました。有難うございます。

その他の回答 (1)

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

2011/12/15 10:04 回答No.1

>質問１　）） >チェックボックスの場合もそれ専用のものはありますか？おなじnameのチェックボックスを使用していますが、名前の競合を起こしていますね。あまりよい使い方とは思えませんねラジオボタンと勘違いしていませんか？単純にデータをとるのは <input type="checkbox" name="bbb" id="b_1" onchange="func(this)" value="B1" /> と自分自身をなげてcheckedをチェックしてやればいいかとあとはdocument.getElementById("b_1")でアクセスするとか >質問２　）） >タイプ１では取得することができませんでした。正しいと思うのですが、なぜでしょうか。 >var chk = document.getElementById('uli').children; せめてdocument.getElementById('uli').getElementsByName("INPUT")として chk[i].type=="checkbox"やchk[i].name=="bbb"を調べるなどのアプローチでしょうか >質問３　）） >多くのサイトではタイプ１を使っているところが多いようです。 selectについては古いブラウザの因習ですねいまはタイプ2でもいけると思いますよチェックボックスについてはformのelementsをぐるっと走査するのが一番確実だと思います

質問者

お礼 2011/12/15 12:36

いろいろと参考になりました。有難うございます。ただ、一点気になったところがあります。 >おなじnameのチェックボックスを使用していますが、名前の競合を >起こしていますね。あまりよい使い方とは思えませんね http://www.tohoho-web.com/how2/form.htm http://www.tagindex.com/html_tag/form/input_checkbox.html http://plog.pya.jp/program/php/lesson08/sample04.html nameを同じにすることでグループを作ることができる、という説明がありますが独立するかグループにするかで何が変わるのでしょうか？

チェックボックスのvalue取得方法

チェックボックスのvalueの取得方法タイプ１と２

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

お礼 2011/12/21 23:36

その他の回答 (1)

お礼 2011/12/15 12:36

注目のQ&A

カテゴリ

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

専門家に質問してみよう