- ベストアンサー
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">パソコン いろいろ試してみたんですけど、そもそのやろうとしてる事は可能なのでしょうか？ 説明が下手でごめんなさい、どうぞよろしくお願いします。
- RISARU
- お礼率66% (4/6)
- AJAX
- 回答数4
- ありがとう数15
- みんなの回答 （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を使用して機能を実現する方法については私も少し調べてみます。 もし分かれば再度回答致します。
関連するQ&A
- inputタグのcheckedの書き方
htmlのタグ属性でcheckedやselected属性がありますが、その正しい書き方がよくわからなく質問させていただきます。 下記のような書き方があるかと思います。 (1)<input type="checkbox" value="サンプル" checked="checked" /> (2)<input type="checkbox" value="サンプル" checked /> (3)<input type="checkbox" value="サンプル" checked="true" /> これらはいずれも正しいのでしょうか？ もし正しい場合、javascriptやjqueryから扱う事も考えた場合、どれが一番、よい書き方なのでしょうか？ 以上、よろしくお願い致します。
- 締切済み
- HTML
- AJAXで生成したHTMLでのチェックボックス一括チェックの方法を教えてください
現在jqueryを使って、ajaxでチェックボックスを生成して、それに対して一括チェックボタンを付けたいと考えております。 <input name="allcheck" type="checkbox" id="checkall" checked="checked" />全て<br /> <input type="checkbox" name="carrier" value="docomo" checked="checked" />docomo<br /> <input type="checkbox" name="carrier" value="au" checked="checked" />au<br /> <input type="checkbox" name="carrier" value="softbank" checked="checked" />softbank<br /> というチェックボックスがajaxで生成されて function carrier_check() { $('#checkall').click(function(e){ $(':checkbox[type=checkbox][name=carrier]').attr('checked', $('#checkall').attr('checked')); }); } のjavascriptで上記のチェックボックスを一括チェックできるようにしようとしているのですが ajaxを使わずに上記のチェックボックスをHTMLに書いているときは一括チェックできるのですが、ajaxを使用して生成した場合にはチェックボックスの一括チェックができません。 どのようにすれば、ajaxで生成されたチェックボックスを一括チェックできるようになるのでしょうか？ ご存知の方がいらっしゃいましたらご教授お願いいたします。
- 締切済み
- JavaScript
- 同じ名前が複数あるインプットフィールドの値を取得するには？
<form action="***" method="post" name="frmTest"> <input name="chktest[0]" type="checkbox" value="c0"> <input name="txttest[0]" type="text" value="t0"> <input name="chktest[1]" type="checkbox" value="c1"> <input name="txttest[1]" type="text" value="t1"> <input name="chktest[2]" type="checkbox" value="c2"> <input name="txttest[2]" type="text" value="t2"> </form> このようなフォームがあった時、例えばtxttest[1]の値をjavascriptで取得する場合、どのように記述すればよいのでしょうか。 document.frmTest.txttest[1].valueでは上手くいきませんでした。 ([document.frmTest.txttest.1はNullまたはオブジェクトではありません]というエラーが発生しました) アドバイスをお願いします。
- ベストアンサー
- JavaScript
- 複数のチェックボックスをチェックしたい
質問させてください。 複数のチェックボックスを項目別に全てチェックするようなjqueryの書き方をご教授いただきたいです。 <table> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />a</li> <li><input type="checkbox" name="" value="" />b</li> <li><input type="checkbox" name="" value="" />c</li> <li><input type="checkbox" name="" value="" />d</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />e</li> <li><input type="checkbox" name="" value="" />f</li> <li><input type="checkbox" name="" value="" />g</li> <li><input type="checkbox" name="" value="" />h</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />i</li> <li><input type="checkbox" name="" value="" />j</li> <li><input type="checkbox" name="" value="" />k</li> <li><input type="checkbox" name="" value="" />l</li> </td> </tr> </table> 上記のようにそれぞれの項目に「まとめてチェック」のチェックボックスがあり、 そこに該当するチェック項目は全てチェックorチェックを外す っという挙動の実装を考えています。 jqueryでやりたいのですが、javascript、jqueryがかなり苦手でいまいちいきません。 ググって $(function(){ $('#all').click(function(){ if(this.checked){ $('#check input').attr('checked','checked'); }else{ $('#check input').removeAttr('checked'); } }); }); このソースを見つけたのですが、これだと一つの項目でしか実装できず 項目分このjqueryを書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。
- ベストアンサー
- JavaScript
- チェックが入っていなかったら処理を行いたい
いつもお世話になっております。 只今チェックボックスにチェックが入っていなかったらチェックを入れるという処理を Javascript、JQueryで行いたいのですが上手く動作せずに困っております。 if ( $( 'input:checkbox[name="tax_input[pick-up][]"]' ).is( 'checked' ) == false ) { jQuery('input:checkbox[name="tax_input[pick-up][]"]').removeAttr ( 'checked' ); jQuery('input:checkbox[name="tax_input[pick-up][]"]:eq(3)').attr ( 'checked', 'checked' ); } 上記のソースで試したのですが反応が全くありませんでした。 if( $( 'input:checkbox[value="98"]' ).is( ':checked' ) ) { jQuery('input:checkbox[name="tax_input[pick-up][]"]').removeAttr ( 'checked' ); jQuery('input:checkbox[name="tax_input[pick-up][]"]:eq(2)').attr ( 'checked', 'checked' ); } チェックが入っている場合の判定ですが上記の場合は動きました。 記述ミス、根本的に書き方が違うなどございましたらご指摘ください。 ご回答のほどどうぞよろしくお願い致します。
- 締切済み
- JavaScript
- formから送信する値について
nameを同じくする複数のチェックボックスのチェック項目について valueを「+」や「,」でつなげて送信したいです 例えば <input type="checkbox" name="color" value="red" checked > <input type="checkbox" name="color" value="blue" checked> <input type="checkbox" name="color" value="green" checked > <input type="checkbox" name="option" value="A" checked > <input type="checkbox" name="option" value="B" checked > <input type="checkbox" name="option" value="C" checked > ならば、submitされるURL変数は ?color=red,blue,green&option=A+B+C になるようにしたいのです よろしくお願いします
- ベストアンサー
- HTML
- チェックボックスを選択するとテキストボックスが表示
質問失礼します。 チェックボックスが下記のようにある場合ですが、 どれかではなく複数選択で テキストボックスを表示させるにはどうしたらよいでしょうか？ <input type="checkbox" name="example" value="" />テレビ ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />新聞 ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />CM ←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />その他 ←チェックしたらテキストボックス表示 色々なJavaScriptを試したのですが、 どうも挙動がおかしく、クリックを続けると表示がされたりできなかったり、 という具合になります。 それぞれテキストボックスを表示させたいチェックボックスに 反映できるJavaScriptをご教示願いますでしょうか？ 宜しくお願い致します。
- ベストアンサー
- JavaScript
- ドロップダウンメニューで選択された内容通りにチェックを入れるJS
ドロップダウンメニューで選択された内容通りにチェックを入れるJS をご教示下さい。 なお、本番環境で対象とするチェックボックスのnameは、全てchkで始まっている法則性があります。 よろしくお願い致します。 <html> <head> <script type="text/javascript"> <!-- // --> </script> </head> <body> <form> <select name="myselect"> <option selected>全てにチェック</option> <option>全てチェック解除</option> <option>奇数だけチェック</option> <option>偶数だけチェック</option> <option>1、6、8番だけチェック</option> <option>3番以降全てチェック</option> </select> <br> <input type="checkbox" value="1" name="chk01" checked>1番<br> <input type="checkbox" value="1" name="chk02" checked>2番<br> <input type="checkbox" value="1" name="chk03" checked>3番<br> <input type="checkbox" value="1" name="chk04" checked>4番<br> <input type="checkbox" value="1" name="chk05" checked>5番<br> <input type="checkbox" value="1" name="chk06" checked>6番<br> <input type="checkbox" value="1" name="chk07" checked>7番<br> <input type="checkbox" value="1" name="chk08" checked>8番<br> <input type="checkbox" value="1" name="chk09" checked>9番<br> <input type="checkbox" value="1" name="chk10" checked>10番 </form> </body> </html>
- ベストアンサー
- JavaScript
- 送信後のチェックボックスの表示
最初の画面でAにチェックされているとします。 そのあとに、AとBをチェックしたあとにSubmitで送信します。 送信したあとに、AとBにチェックした最初の画面を表示させたいときは、 どんな風にすればよいのでしょうか。 今は・・・ If Request.Form="" <input type="checkbox" name="test" value="A" checked>A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C">C Else Select Request.Form("test") Case "A" <input type="checkbox" name="test" value="A" checked>A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C">C Case "B" <input type="checkbox" name="test" value="A">A <input type="checkbox" name="test" value="B" checked>B <input type="checkbox" name="test" value="C">C Case "C" <input type="checkbox" name="test" value="A">A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C" checked>C ・・・ End Select End If というように、全ての場合のときに"checke"をつけて表示させています。 もっと、効率のよい書き方はないものでしょうか？
- ベストアンサー
- Microsoft ASP
- PHP
PHPで <p>曜日</p> <p> <input type="checkbox" name="youbi[]" value="1" <?php if(strstr($result[4],'1')) echo"checked"; ?>>月 <input type="checkbox" name="youbi[]" value="2" <?php if(strstr($result[4], '2')) echo"checked"; ?>>火 <input type="checkbox" name="youbi[]" value="3" <?php if(strstr($result[4],'3')) echo"checked"; ?>>水 <input type="checkbox" name="youbi[]" value="4" <?php if(strstr($result[4],'4')) echo"checked"; ?>>木 <input type="checkbox" name="youbi[]" value="5" <?php if(strstr($result[4],'5')) echo"checked"; ?>>金 <input type="checkbox" name="youbi[]" value="6" <?php if(strstr($result[4],'6')) echo"checked"; ?>>土 <input type="checkbox" name="youbi[]" value="0" <?php if(strstr($result[4],'0')) echo"checked"; ?>>日 </p> <p>時間</p> <p> <input type="submit" value="設定" /> とやると日曜日を選択してsubmitするとチェックが外れます。なぜでしょうか？
- ベストアンサー
- PHP
お礼
大変参考になりました、ありがとうございます。 普段、Firebugを使用してないのできこれを機会にアドオン入れてみます。 ※なんか、重くなる感じがして抵抗があったんです・・・ 要は、まとめられるトコはjQueryで書いて補えばいいんですね。 jQueryのみで全て書いてしまおうと思ってたので。。。 もうちょっと頭柔らかくしてみます。 また何かありましたらコチラに泣き事書き込むかもしれませんが、その時はまたよろしくお願い致します。 ありがとうございました！