アプリ版：「スタンプのみでお礼する」機能のリリースについて

AJAXでのinputもしくはoptionなどのテキスト取得

解決済

  • 質問者：RISARU
  • 質問日時：
  • 回答数：4件

お知恵を貸して下さい。。。

今、フォームの各項目を選択してる場合(たとえば、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">パソコン


いろいろ試してみたんですけど、そもそのやろうとしてる事は可能なのでしょうか？

説明が下手でごめんなさい、どうぞよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

  • 回答者： think49
  • 回答日時：

#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/
    • good
    • 0
    • 件
通報する
この回答へのお礼

大変参考になりました、ありがとうございます。

普段、Firebugを使用してないのできこれを機会にアドオン入れてみます。
※なんか、重くなる感じがして抵抗があったんです・・・

要は、まとめられるトコはjQueryで書いて補えばいいんですね。
jQueryのみで全て書いてしまおうと思ってたので。。。

もうちょっと頭柔らかくしてみます。

また何かありましたらコチラに泣き事書き込むかもしれませんが、その時はまたよろしくお願い致します。

ありがとうございました！

通報する
お礼日時：2009/06/22 17:47

No.4

  • 回答者： x_jouet_x
  • 回答日時：

回答#2さん、私に代わっての回答ありがとうございました。



普通にDOMのプロパティを使えば良かったんですね。
jQueryの関数ばかり気にしていて、そこまで頭が回らなかったです。

> input要素は空要素なので子要素が存在しないんじゃないでしょうか？
そうですね、空要素でした。
input要素は今までnameやvalueといった属性値しか使用していなかったので、Firebugで確認して改めて認識しました。


質問者さんへ。
参考URLに、JavaScriptのDOMリファレンスのサイトを掲載しておきます。

参考URL：http://www.openspc2.org/JavaScript/JavaScript_DO …
    • good
    • 0
    • 件
通報する
この回答へのお礼

すばやい回答ありがとうございました。

>input要素は今までnameやvalueといった属性値しか使用していなかったので、Firebugで確認して改めて認識しました。
私もそうでした・・・

もうちょっと幅広く考えるべきでした、固執しすぎましたね・・・
頭柔らかくしてみます！

DOMについても、もっと勉強しなければ・・・

通報する
お礼日時：2009/06/22 17:43

No.2

  • 回答者： think49
  • 回答日時：

> <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要素は空要素なので子要素が存在しないんじゃないでしょうか？
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： x_jouet_x
  • 回答日時：

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を使用して機能を実現する方法については私も少し調べてみます。
もし分かれば再度回答致します。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報