0

こんにちは、私は次のものを持っています

<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue  name=radioOpt    value=1 CHECKED type=radio>&nbsp;Option1
</label>
<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue  name=radioOpt    value=2 CHECKED type=radio>&nbsp;Option2
</label>
<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue  name=radioOpt    value=3 CHECKED type=radio>&nbsp;Option3
</label>

オプション x の名前を変更して、何らかのイベントに基づいて x をテストしたいと考えています。

var radioOpt = $("input[name=radioOpt][value=1]");

ラジオボタンをくれます。ラベルの名前を変更するにはどうすればよいですか?

4

5 に答える 5

1

マークアップを変更したくない場合は、次のようにして、この場合のテキストを変更できます。

$(function(){
     $("input[name=radioOpt][value=1]")
      .parent()
      .contents()
      .last()[0].nodeValue = 'Test 1';
});

デモ http://jsfiddle.net/joycse06/U7TMs/

于 2012-06-21T18:06:53.607 に答える
1

以下のようにしてみてください、

$(function () {
    $("input[name=radioOpt]").parent().contents().each(function () {
        if (this.nodeType == 3 && this.nodeValue.indexOf('Option') != -1) {
            this.nodeValue = 'Test';
        }
    });
});

デモ: http://jsfiddle.net/skram/Cgv2f/2/

于 2012-06-21T18:02:26.670 に答える
0

私は次のことを提案します：

var labelForOpt = radioOpt.parent();

ただし、labelアクセシビリティ上の理由から、「所属する」forを指定する属性が必要です。次に例を示します。input

<label for="radioElement1">For radio One:</label>
<input id="radioElement1" />

inputこれは、内にネストする必要がないことを意味しlabel、をクリックするlabelと、関連付けられたのクリックがトリガーされますinput。

HTMLが無効であることも指摘しておく価値があります。

<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue ) name=radioOpt value=1 CHECKED type=radio>&nbsp;Option1
</label>

要素)のHTML内にフローティングがあってはなりません。input

于 2012-06-21T17:57:00.837 に答える
0 
radioOpt.closest("label");

これにより、選択した要素の祖先である最も近いlabel要素（または要素自体が得られますが、そうではありません）が得られます。.html(function)次に、を使用して、または繰り返し処理し.contents()、テキストノード（ここで）をフィルタリングして値を置き換えることにより、テキストを置き換えることができます。this.nodeType=== 3

実際の質問とは関係ありませんが、HTMLにかなりの数のマークアップエラーがあることをお知らせします。)属性の後にはあってはなりませんclass。同じ名前のラジオボタンを複数チェックすることはできません。クラスを使用してCSSでスタイルを設定できる場合は、インラインスタイルを使用することをお勧めします。

<label>
    <input type="radio" name="radioOpt" class="fieldValue" value="1" checked/> Option1
</label>
<label>
    <input type="radio" name="radioOpt" class="fieldValue" value="2"/> Option2
</label>
<label>
    <input type="radio" name="radioOpt" class="fieldValue" value="3"/> Option3
</label>

次に、スタイルをCSSスタイルシートに入れます。

input.fieldValue {
    display: inline;
    vertical-align: middle;
}
于 2012-06-21T17:57:13.413 に答える
0

これを試して ：

HTML :

    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue ) name=radioOpt    value=1 CHECKED type=radio id="op1"><label for = "op1">Option1
</label>
<label>
    <INPUT style="DISPLAY: inline; VERTICAL-ALIGN: middle" class="fieldValue" name="radioOpt" id="op2"   value="2" CHECKED type="radio"><label for = "op2">Option2
</label>
<label>
    <INPUT id="op3" style="DISPLAY: inline; VERTICAL-ALIGN: middle" class=fieldValue ) name=radioOpt    value=3 CHECKED type=radio><label for = "op3" >Option3

</label>​

jQuery:

$("input[name=radioOpt]").click(function(){
    var id = $(this).attr('id');
    $('label[for='+id+']').text('test_'+$(this).attr('value'));
});
​

デモはこちら

于 2012-06-21T18:15:17.623 に答える