2

以前の隣人のラジオボタンを繰り返し処理しています。私のhtmlは次のようになります：

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="" />
</div>

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="checked" />
</div>

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="" />
</div>

red隣接するラジオ ボタンがオンになっているスパンにクラスを追加しようとしています。これが私が試した方法です：

$('.holder span').each(function(){
                var spanElement = $(this);
                if(spanElement.nextAll(':radio:first').is(':checked')){
                    spanElement.addClass("red");
                }
            });

私はいつも class を持つ最後のスパン (3 番目の所有者の div のもの) で終わりますred。しかし、ご覧のとおり、中央のものはチェックされています。checked=checked最初のスパンに設定すると同じことが起こります

アップデート

また試してみました：

$('.holder span').each(function(){
                if($(this).next().attr("checked") == "checked"){
                    $(this).addClass("red");
                }
            });

同じ結果で、他に何を試せばよいかわかりません。

更新 II :

Html は、サーバー側から生成された以前の情報でレンダリングされるため、checked=checkedHTML が作成されると、ラジオ入力要素は 1 つだけになります。

ドキュメント準備機能でこの反復トラフ スパンを実行しています。

4

4 に答える 4

1

チェックされた入力を選択し、その兄弟スパン要素にクラスを追加できます。

$('.holder input[type=radio]:checked').prev('span').addClass('red')

http://jsfiddle.net/TdR7k/

変更イベントでクラスを追加および削除する場合は、次のことを試すことができます。

$('.holder input[type=radio]').change(function() {
     $('.red').removeClass('red');
     $(this).prev('span').addClass('red')
}).change()

http://jsfiddle.net/dSv6P/

于 2012-10-26T03:23:10.930 に答える
1

この変更を試してください：

$('.holder span').each(function(){
                var spanElement = $(this);
                if(spanElement.next('input[type=radio]').is(':checked')){
                    spanElement.addClass("red");
                }
            });
于 2012-10-26T03:21:29.900 に答える
0

問題は、ラジオ ボタンを定義する方法です。html に checked 属性を含めないでください。そうしないと、デフォルトでチェックされます。例: http://jsfiddle.net/TdR7k/1/

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capabiy" value="primary" checked="" />
</div>

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="checked" />
</div>

<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capabiliy" value="primary" checked  />
</div>​

3つともチェック済み

ラジオボタンの正しい定義は

<input type="radio" name="(Group)" value="(etc)"  />

そして、デフォルトでチェックするには、必要なものはすべて次のとおりです。

<input type="radio" name="(Group)" value="(etc)" checked />

デフォルトですべてチェックされている同じグループの 3 つのラジオ ボタンを追加していたので、最後の 1 つは前の 2 つをオーバーライドし、赤のクラスを取得していました。

ただし、主に実際の回答については、checked を属性として含めず、javascript を onclicked イベントとして適用するか、checked を単一の要素にのみ追加してください。これは onclick イベントの例です: http://jsfiddle.net/7kbLf /2/

于 2012-10-26T03:46:54.277 に答える
0

Radio Button に checked 属性が含まれている場合。次に、デフォルトでチェックされています..

<input type="radio" name="group1" value="hello" checked>  // Checked by default.

そのため、他の 2 つの RadioButton の checked プロパティを削除します。そうしないと、構文が原因で、checked プロパティを持つ最後の項目がデフォルトでチェックされます。

<div class="holder"> 
    <span>some text</span> 
    <input type="radio" name="test_capability" value="primary" /> 
</div>
<div class="holder">
   <span>some text</span>
   <input type="radio" name="test_capability" value="primary" checked="checked"/> 
</div>
<div class="holder"> 
    <span>some text</span> 
    <input type="radio" name="test_capability" value="primary" />
 </div>

このように HTML を設定すると、アプローチが機能するはずです。

$('.holder span').each(function() {
    var spanElement = $(this);
    if (spanElement.nextAll(':radio:first').is(':checked')) {
        spanElement.addClass("red");
    }
});

// Change event 
$('input[type="radio"]').on('change', function() {
    $('span').removeClass('red');

    if( this.checked){
        $(this).closest('div.holder').find('span').addClass('red');
    }
});

フィドルをチェック

于 2012-10-26T04:17:13.937 に答える