jquery - 選択したラジオボタンのテキストを検索

Question

これは、動的に生成された html ラジオ ボタン リストです。

<label class="radio" for="10013"><input type="radio" name="himg" value="10013">Amr1a</label> 

<label class="radio" for="10014"><input type="radio" name="himg" value="10014"> Amr2a</label>

クリックした（チェックした）ラジオボタンのテキストを選択したい

これは私が試したものです（jquery-1.9.1）

$(document.body).on('click', 'input:radio[name="himg"]', function () {
                alert($(this).next().text());

            });

しかし、それは何も返しません。

Answer 1

変化する：

alert($(this).next().text());

に：

alert($(this).parent().text());

jsFiddle の例

ラジオボタン要素をクリックしてから、.next()存在しない次の要素を探し、テキストノードのみを使用しようとしています。を使用.parent()すると、ラベル内のテキストを取得できます (ラジオの HTML は含まれません)。

Answer 2

必要はありませんbody...next()次next()のDOM要素を検索しますが、あなたの場合はテキストです..parent()を使用してtext()

これを試して

$(document).on('click', 'input:radio[name="himg"]', function () {
            alert($(this).parent().text());

        });

Answer 3

これを試して：

$(document).on('click', 'input:radio[name="himg"]', function () {
    alert($(this).parent().text());
});

実際には、labelここは選択されたラジオ ボタンの親であり、兄弟の直後ではありません。したがって、parent()ラベル要素を取得するために使用する必要があり、それがテキストです。

Answer 4

ラジオIDlabel-for を指定し、属性でラベルに関連付けて使用しforます。

ラベルの使用方法を参照

デモ

HTML

<input type="radio" id="radio1" name="himg" value="10013" />
<label class="radio" for="radio1">Amr1a</label>
<input type="radio" id="radio2" name="himg" value="10014" />
<label class="radio" for="radio2">Amr2a</label>

JS

$(document.body).on('click', 'input:radio[name="himg"]', function () {

    alert($('label[for=' + this.id + ']').text()); // Ids are going to be unique so yuo can directly select it with label for.

});

Answer 5

コードを少し調整すると、次のように動作するはずです。

   $(document.body).on('click', 'input:radio[name="himg"]', function () {
      alert($(this).closest('label').text());
    });