javascriptについて

質問

現在会社のHPのお問い合わせフォームを作っています。

フォーム画面で確認ボタンを押すと、確認画面を表示させたく、

http://blog.material-being.com/portfolio/auto_confirm/

こちらのページのjavascriptをつかって、作ってみたのですが、

書かれているソースで分からないところがあります。

switch ($(this).attr('type')) {
//---------------------------------
// hidden, button, submit：何もしない
//---------------------------------
case 'hidden':
case 'button':
case 'submit':
break;
//---------------------------------
// checkbox, radio：選択されたラベルの値を取得
//---------------------------------
case 'checkbox':
case 'radio':
var checkOrRadioName = $(this).attr('name');
//同じName属性の要素を既に処理していなければ
if(checkOrRadioNames.indexOf($(this).attr('name')) == -1) {
checkOrRadioNames += checkOrRadioName + ','; // x+= y → x = x + y
var checks = '';
$(formClass + ' [name="'+checkOrRadioName+'"]:checked').each(function() {
//チェックボックスのチェック要素の選択。
if(getLabelCR) {
//ラベルの値を取得する場合
var checkOrRadioVal = $('label[for="'+$(this).attr('id')+'"]').html();
}else{
//Valueの値を取得する場合
var checkOrRadioVal = $(this).val();
}
if(checks == '') {
checks += checkOrRadioVal;
}else{
checks += ',' + checkOrRadioVal;
}
});
$(formClass + ' [name="'+checkOrRadioName+'"]:last').after('<span class="autoConfirmVal">'+ checks +'</span>');
}
$('label[for="'+$(this).attr('id')+'"]').css('display', 'none');
break;
//---------------------------------
// password：入力文字を"*"記号に置き換える
//---------------------------------
case 'password':
$(this).after('<span class="autoConfirmVal">'+ $(this).val().replace(/./g, '*') +'</span>');
break;

default :
$(this).after('<span class="autoConfirmVal">'+ $(this).val() +'</span>');
}

このradio部分がよくわかりません。

(1)
var checkOrRadioName = $(this).attr('name');
if(checkOrRadioNames.indexOf($(this).attr('name')) == -1) {
これは、同じものを検索しているのように見えるのですが、、-1になるのでしょうか？
(2)
$(formClass + ' [name="'+checkOrRadioName+'"]:checked').each(function() {
var checkOrRadioVal = $('label[for="'+$(this).attr('id')+'"]').html();
上記の大括弧は何を意味するのでしょうか？
forとはなんでしょうか。
(3)
.eachは繰り返しなのでしょうか？

以上、よろしくお願いいたします。

回答No.3

tracer

#1です。
ちゃんとソースを読まずにjavascriptのことばかりと勘違いして回答してしまいました。
すいません。
#2さんのおっしゃるとおりです。
forはhtml要素のlabelの属性なので、「label for」と検索すればよかったですね。

回答No.2

hitomura

……あー、for について質問者様も #1 様も誤解されているなぁ……

　var checkOrRadioVal = $('label[for="'+$(this).attr('id')+'"]').html();
という式ですが、JQuery では $(なんたら) で処理対象とする要素を絞り込みます。
その絞込みの条件である「なんたら」の部分が今回の場合
　'label[for="'+$(this).attr('id')+'"]'
となっています。この部分は文字列と何らかの式の結果との連結になっていますので、その「何らかの式の結果」を仮に'hoge'とすると、上で出来上がる文字列は
　'label[for="hoge"]'
となります。つまり、最初の式は上の条件（ただし"hoge"の部分は可変）を満たす要素内の HTML を checkOrRadioVal に格納しているのです。

では
　'label[for="hoge"]'
という条件は何を表すのかかという点ですが、CSS では処理を行う対象を絞り込む方法の一つとして、その要素が持つ属性とその値での絞り込みが可能となっています。
http://www.htmq.com/selector/attrvalue.shtml
つまり、この条件は for という属性として hoge という値を持っている label を絞り込んでいるのです。
ええ、つまりこの for は JavaScript の制御構文としての for ではなく HTML のタグ label の属性としての for なのです。
http://www.htmq.com/html/label.shtml

回答No.1

tracer

forをご存知ない以上、おそらく何を説明しても、疑問が疑問を呼ぶでしょう。forは最も基本的な文法です。一応、なんとなくは説明しますが、forやeachなどは、検索すればすぐ出るわけですから、まず最低限調べてから質問されてはいかがでしょうか。

1.
検索した結果がfalseだった(見つからなかった)場合を想定しています。
javascriptでは、falseと-1は同義に扱えます。

2.
たくさんカッコがあるので、何を指して質問されているのかわかりません。。。

3.
文法からしておそらくjQueryというライブラリを使用しています。
eachはjQueryのメソッドで、DOMを繰り返し処理する際に使用します。
ちなみに、forもループ処理ですが、eachはDOM専用の繰り返し処理といったところです。
ちなみのちなみに、DOMというのは・・・ね?　疑問が疑問を呼ぶでしょ?
余計なおせっかいですが、質問者さんがサンプルで実装するのはまだ段階的に早すぎると思います。もう少し最低限の知識をつけるべきです。

お礼

ありがとうございます
forは
for(x=1; x<50; x++)｛｝
での使い方でしか見たことなかったもので、
for=を検索してもなかなか出てこず、この場をお借りしました。
自分でも調査中です。