CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hkm Sadek Hossain
Hkm Sadek Hossain

Reputation: 73

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

Upvotes: 1

Views: 56

Answers (4)

Josh Bartman
Josh Bartman

Reputation: 36

For the inherit term you can, of course, put any color. The new line resets the background color for every object the class is applied to.

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

Here's a JSFiddle for the solution.

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68665

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>

Upvotes: 3

Iceman
Iceman

Reputation: 6145

Add a code to change bacground to default before updating current. I'd suggest you to cache the set of elements in a variable (myset in my example for significant performance benefits).

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

Upvotes: 1

Rob M.
Rob M.

Reputation: 36511

Just reset everything before you set the click color:

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

Upvotes: 1

Related Questions