jquery：入力ラベルの色を変更する

Question

<label>  
<input type="radio" id="other" name="level_0" value="other" class="other">other 
</label> 

私は上記のリストを並べ替えられていないと言います。ラジオボタンをクリックすると、ラベルが赤色になります。

私は次のことを試してみました：「ラベル」

$('input[type=radio]').click(function(){ 
if($(this).is(':checked')){ 
    $(this).prev().css("color","red"); 
} 
}); 

これは前の要素をつかむべきではない、と赤にその色を変更できますか？

Answer 1

$('input[type=radio]').click(function() { 
 
    if ($(this).is(':checked')) { 
 
    $(this).closest('label').addClass("red"); 
 
    } 
 
});

.red { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="radio" id="other" name="level_0" value="other" class="other">other 
 
</label>

1. 使用.closest()
2. .prev()兄弟要素のために使用されています。
3. も.parent()
4. 投書使用.addClass()の代わりに、直接

Answer 2

スタイルを追加することを使用することができます私は前の（）クエリがバックすぎて検索すると仮定しています。 parent（）に変更すると（入力がラベル内にあるので意味があります）、正しく機能しました。これは、あなたがやっていることの基礎を勉強していないときに起こります！

Answer 3

あなたも、この

$('input[type=radio]').click(function(){ 
    if($(this).is(':checked')){ 
    $(this).closest('label').css({"color":"red"}); 
    } 
}); 

チェンジ前のページ（）を使用することができますが、（）

https://jsfiddle.net/darkrulerbreaker/neqrknkr/

Answer 4

あなたが「ドンCSSを使用したい場合は、括弧の内側（最も近い）とブラケットへこれにはjqueryを使用する必要があります - CSSですべてを行うようにしてください。ラベルのテキストの後ろに赤色（色を使用）またはラベルの背景を赤色（背景を使用）にすることもできます。これにより、clickイベントではなく、入力のチェックされた状態のラベルの色/背景が変更されます。

CSSトリックサイト（https://css-tricks.com/almanac/selectors/c/checked/） - ：チェックされた擬似クラスセレクタは、ラジオとチェックボックスの入力タイプがオンになっているかオンになっている場合に一致します。 。

これは入力後のラベルに影響することに注意してください。

input[type=radio]:checked + label{ 
 
    color:red 
 
}

<input type="radio" id="option1" name="level_0" value="1" class="other"> 
 
    <label>option 1</label>  
 
<input type="radio" id="option2" name="level_0" value="2" class="other"> 
 
    <label>option 2</label>