JSでラジオボタンの選択・未選択をチェックする際のコードの組み方による動作の差分(謎)

投稿日: 更新日:

例えば次のようなラジオボタンを含むフォームがあって、

<li><label>アイコン#1<input type="radio" name="icon" value="icon_001"></label></li>
<li><label>アイコン#2<input type="radio" name="icon" value="icon_002"></label></li>
<li><label>アイコン#3<input type="radio" name="icon" value="icon_003"></label></li>
<input name="post_comment" type="submit" />

ラジオボタンが選択されたらinput[name="post_comment"]に、class="ready"を付加する。

最初こんな風に組んだが、ラジオボタンの選択肢を変更すると、選択済みである事は変わらないのに、それがトリガーとなってreadyが付いたり消えたりする。

c('input[name="icon"]').on('change', function(){
    c('input[name="post_comment"]')
                    .toggleClass("ready", c('input[name="icon"]:checked').length );
});

で、一方で次の様に組むと通る。

c('input[name="icon"]').on('change', function(){
    c('input[name="post_comment"]')
    .toggleClass("ready",
        /\S/.test( c('input[name="icon"]:checked').val() )
    );
});

なんで?(?_?)まあ、原因はよく見ればあるのだろうけどね、、

関連するタグ

関連するタグは現在ありません。