お知恵を貸して下さい。。。
今、フォームの各項目を選択してる場合(たとえば、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">パソコン
いろいろ試してみたんですけど、そもそのやろうとしてる事は可能なのでしょうか?
説明が下手でごめんなさい、どうぞよろしくお願いします。
No.3ベストアンサー
- 回答日時:
#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/
大変参考になりました、ありがとうございます。
普段、Firebugを使用してないのできこれを機会にアドオン入れてみます。
※なんか、重くなる感じがして抵抗があったんです・・・
要は、まとめられるトコはjQueryで書いて補えばいいんですね。
jQueryのみで全て書いてしまおうと思ってたので。。。
もうちょっと頭柔らかくしてみます。
また何かありましたらコチラに泣き事書き込むかもしれませんが、その時はまたよろしくお願い致します。
ありがとうございました!
No.4
- 回答日時:
回答#2さん、私に代わっての回答ありがとうございました。
普通にDOMのプロパティを使えば良かったんですね。
jQueryの関数ばかり気にしていて、そこまで頭が回らなかったです。
> input要素は空要素なので子要素が存在しないんじゃないでしょうか?
そうですね、空要素でした。
input要素は今までnameやvalueといった属性値しか使用していなかったので、Firebugで確認して改めて認識しました。
質問者さんへ。
参考URLに、JavaScriptのDOMリファレンスのサイトを掲載しておきます。
参考URL:http://www.openspc2.org/JavaScript/JavaScript_DO …
すばやい回答ありがとうございました。
>input要素は今までnameやvalueといった属性値しか使用していなかったので、Firebugで確認して改めて認識しました。
私もそうでした・・・
もうちょっと幅広く考えるべきでした、固執しすぎましたね・・・
頭柔らかくしてみます!
DOMについても、もっと勉強しなければ・・・
No.2
- 回答日時:
> <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要素は空要素なので子要素が存在しないんじゃないでしょうか?
No.1
- 回答日時:
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が見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- PHP $_SESSIONについて教えて下さい。 2 2023/03/02 09:18
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- JavaScript Javascriptを使ってQRコード読み取り、取得した情報をPOSTしたいと思っています。 1 2023/04/28 15:18
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【VBA/HTML】特定のタグ要素に...
-
bxSliderで動画をスライドごと...
-
パイソンでのカッコ
-
マイページはどこを開くの
-
デジタル時計の時刻合わせの方...
-
エクセルのシート上に別のシー...
-
ウインドウを毎回同じ位置、大...
-
Excelでワードアートや図を常に...
-
[Java] Edgeでのアドレスバー非...
-
Javascript_submit()完了後に処...
-
Yahoo地図でマーカーを表示した...
-
スクリプトって、何ですか?ど...
-
エクセルでポップアップを出し...
-
scrollTopについて
-
一定時間おきにアラームやポッ...
-
PDFを(htmlのように)無限に縦...
-
「Cancel = True」とはどういう...
-
Excel VBAでの右クリックのポッ...
-
ポップアップウィンドウがブロ...
-
window.openで新しいページを後...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【VBA/HTML】特定のタグ要素に...
-
ajax
-
(VBS) テキストファイル読込で...
-
JQuery、セレクトボックスをル...
-
VC++のデバッガでvectorの要素...
-
JavaScriptでクリップボードの...
-
WebサイトのHTMLオブジェクトの...
-
VBA HTTPを用いたWEB画面の取...
-
【VB.NET】HTML要素を取得しよ...
-
スプレッドシートのチェックボ...
-
PL/Iについて、教えてください。
-
no confilict で value値が取れな
-
javascriptを一つのjsファイル...
-
エクセルでタグの内容が取得で...
-
マウスの入って来た方向を検出...
-
マイページはどこを開くの
-
デジタル時計の時刻合わせの方...
-
ウインドウを毎回同じ位置、大...
-
エクセルのシート上に別のシー...
-
一定時間おきにアラームやポッ...
おすすめ情報