- ベストアンサー
AJAXでのinputもしくはoptionなどのテキスト取得
お知恵を貸して下さい。。。 今、フォームの各項目を選択してる場合(たとえば、checkedがついてる場合)その要素のテキスト部分を別部分に出力してーというのをjQueryで作ってます。 inputのvalue値やnameは取ってこれるんですが、<input>タグの後のテキスト部分がなかなか思うように取得出来ませんでした。 PHPでのフォームで下記のようにしてるので、どうしてもinputの後のテキストを取りたいのです。(下記の場合、パソコンという部分) ↓ <input type=checkbox name="NAM[1]" value="1">パソコン <input type=checkbox name="NAME[2]" value="1">パソコン <input type=checkbox name="NAME[3]" value="1">パソコン いろいろ試してみたんですけど、そもそのやろうとしてる事は可能なのでしょうか？ 説明が下手でごめんなさい、どうぞよろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#2です。 修正漏れがあったので、補足します。 --- if(typeof window.addEventListener == 'function'){ window.addEventListener('load', init_jQuery, false); // init に変えれば「DOM標準の方法」に } else if(typeof window.attachEvent == 'object'){ window.attachEvent('onload', init_jQuery); // init に変えれば「DOM標準の方法」に } --- もう少し調べてわかりましたが、ここもjQueryで書き直すことが出来るようです。 ---- <script type='text/javascript'> $(document).ready(function(){ $('input[type=checkbox]').each(function(){ console.info(this.nextSibling.nodeValue); // コンソールへ出力 (要Firebug) }); }); </script> ---- これだけ短くなるんですね。jQuery便利かも。 ready(fn) - jQuery 1.3.2 日本語リファレンス http://semooh.jp/jquery/api/events/ready/fn/
その他の回答 (3)
- x_jouet_x
- ベストアンサー率68% (162/236)
回答#2さん、私に代わっての回答ありがとうございました。 普通にDOMのプロパティを使えば良かったんですね。 jQueryの関数ばかり気にしていて、そこまで頭が回らなかったです。 > input要素は空要素なので子要素が存在しないんじゃないでしょうか？ そうですね、空要素でした。 input要素は今までnameやvalueといった属性値しか使用していなかったので、Firebugで確認して改めて認識しました。 質問者さんへ。 参考URLに、JavaScriptのDOMリファレンスのサイトを掲載しておきます。
お礼
すばやい回答ありがとうございました。 >input要素は今までnameやvalueといった属性値しか使用していなかったので、Firebugで確認して改めて認識しました。 私もそうでした・・・ もうちょっと幅広く考えるべきでした、固執しすぎましたね・・・ 頭柔らかくしてみます！ DOMについても、もっと勉強しなければ・・・
- think49
- ベストアンサー率59% (285/482)
> <input>タグの後のテキスト部分がなかなか思うように取得出来ませんでした。 「テキストノードを取得したい」ではなく、「Stringを取得したい」でいいでしょうか？ 以下、その前提のコードです。IE7,Firefox3で動作確認済み。 (jQueryに初めて触ったので、もっと効率のいい書き方があるかもしれません。) ---- <script type='text/javascript'> (function(){ // jQuery記法 function init_jQuery(){ $('input[type=checkbox]').each(function(){ console.info(this.nextSibling.nodeValue); // コンソールへ出力 (要Firebug) }); } // DOM標準の記法 function init(){ var chk = document.getElementsByTagName('input'); for(var i=0,max=chk.length; i<max; i++){ if(chk[i].type == 'checkbox'){ console.info(chk[i].nextSibling.nodeValue); // コンソールへ出力 (要Firebug) } } } if(typeof window.addEventListener == 'function'){ window.addEventListener('load', init_jQuery, false); // init に変えれば「DOM標準の方法」に } else if(typeof window.attachEvent == 'object'){ window.attachEvent('onload', init); } })(); </script> </head> <body> <input type="checkbox" name="NAME[1]" value="1" />パソコン1 <input type="checkbox" name="NAME[2]" value="1" />パソコン2 <input type="checkbox" name="NAME[3]" value="1" />パソコン3 ---- ポイントは「nextSiblingプロパティ」「nodeValueプロパティ」 「DOM プロパティ」でGoogle検索すると関連情報が手に入りますので、参考にしてください。 また、FirebugのDOMタブを見るとプロパティ一覧が確認できますので、活用すると便利です。 >> #1さん > input要素とテキスト要素は兄弟要素(sibling)になるんですね。 input要素は空要素なので子要素が存在しないんじゃないでしょうか？
- x_jouet_x
- ベストアンサー率68% (162/236)
Firebugで色々と確認してみましたが、 <input type=checkbox name="NAME[1]" value="1">パソコン と記述すると、input要素の子要素(children)としてテキスト要素(値: パソコン)を持つのではく、input要素とテキスト要素は兄弟要素(sibling)になるんですね。 私もcontents(), next(), siblings()等の各関数を試してみましたがテキスト部分の取得ができませんでした。 作成したい機能を簡単に実現する代替案としては、 [HTML] <input type="checkbox" name="NAME[1]" value="1" title="パソコン1">パソコン1 <input type="checkbox" name="NAME[2]" value="2" title="パソコン2">パソコン2 <input type="checkbox" name="NAME[3]" value="3" title="パソコン3">パソコン3 <br> <button onclick="sample();">実行</button> 上記のHTMLのようにtitle属性に同じテキストを記述しておき、 [JavaScript] function sample() { var checks = $.find("input:checked"); $(checks).each(function(i, check) { alert(check.title); }); } 上記のようなJavaScriptにするという方法もあります。 jQueryを使用して機能を実現する方法については私も少し調べてみます。 もし分かれば再度回答致します。
お礼
大変参考になりました、ありがとうございます。 普段、Firebugを使用してないのできこれを機会にアドオン入れてみます。 ※なんか、重くなる感じがして抵抗があったんです・・・ 要は、まとめられるトコはjQueryで書いて補えばいいんですね。 jQueryのみで全て書いてしまおうと思ってたので。。。 もうちょっと頭柔らかくしてみます。 また何かありましたらコチラに泣き事書き込むかもしれませんが、その時はまたよろしくお願い致します。 ありがとうございました！