Hkm Sadek Hossain Hkm Sadek Hossain - 3 months ago 8
Javascript Question

How to make radio input selected not the multiple

I have some radio inputs. Please see the code

<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>


There are many input like this. I want to add selected color when a user clicks on one input. For this I am using this Jqurey code

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


This code solve the problem but the problem is, it gives all the clicked input same color. I want only the last clicked input the color and other should return to default .
Thanks in advance..

Answer

Try this

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

This is a working example

$(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>