マルチプルではなくラジオ入力を選択する方法

Question

ラジオ入力があります。コードを参照してください

<div class="radio"> 
    <label class="btn btn-time text-center "> 9.30 PM 
     <input type="radio" name="optionsRadios"id="optionsRadios20"value="9.30PM" /> 
    </label> 
</div> 

このように多くの入力があります。ユーザーが1つの入力をクリックしたときに、選択した色を追加したい。このために私は

 $(document).ready(function() { 
     $(".btn-time").click(function(){ 
      $(this).css("background", "#DF73AF"); 
      }); 
     }); 

このコードは、問題を解決するが、問題は、それがすべてのクリック入力と同じ色を与えている、このjQueryのコードを使用しています。私は、最後にクリックされた入力だけを色で、その他はデフォルトに戻す必要があります。あなたがクリックの色を設定する前に、事前に 感謝..

Answer 1

これは

$(document).ready(function() { 
 
    $(".btn-time").click(function(){ 
 
    $(".btn-time").css('background', '#FFF'); 
 
    $(this).css("background", "#DF73AF"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="radio"> 
 
    <label class="btn btn-time text-center "> 9.30 PM 
 
     <input type="radio" name="optionsRadios"id="optionsRadios20"value="9.30PM" /> 
 
    </label> 
 
    <label class="btn btn-time text-center "> 10.30 PM 
 
     <input type="radio" name="optionsRadios"id="optionsRadios20"value="10.30PM" /> 
 
    </label> 
 
    <label class="btn btn-time text-center "> 11.30 PM 
 
     <input type="radio" name="optionsRadios"id="optionsRadios20"value="11.30PM" /> 
 
    </label> 
 
    <label class="btn btn-time text-center "> 12.30 PM 
 
     <input type="radio" name="optionsRadios"id="optionsRadios20"value="12.30PM" /> 
 
    </label> 
 
</div>

実施例である。この

$(document).ready(function() { 
    $(".btn-time").click(function(){ 
    $(".btn-time").css('background', 'yourColor'); 
    $(this).css("background", "#DF73AF"); 
    }); 
}); 

をお試しください

Answer 2

ただ、すべてをリセットします。

$(document).ready(function() { 
    $(".btn-time").click(function(){ 
     $(".btn-time").css('background', '#fff'); // or whatever default color 
     $(this).css("background", "#DF73AF"); 
    }); 
}); 

Answer 3

最新のものを更新する前に、バックグラウンドをデフォルトに変更するコードを追加します。変数のセットをキャッシュに入れることをお勧めします（私の例では、パフォーマンス上のメリットとしてはmyset）。

$(document).ready(function() { 
    var myset = $(".btn-time"); 
    myset.click(function() { 
    myset.css("background", "default_color"); 
    $(this).css("background", "#DF73AF"); 
    }); 
}); 

Answer 4

継承用語については、もちろん任意の色を入力できます。新しい行は、クラスが適用されるすべてのオブジェクトの背景色をリセットします。

$(document).ready(function() { 
    $(".btn-time").click(function() { 
    $(".btn-time").css('background', 'inherit'); 
    $(this).css("background", "#DF73AF"); 
    }); 
}); 

解決策はJSFiddleです。