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>

有很多这样的输入。我想在用户点击一个输入时添加所选颜色。为此我使用这个jQuery代码

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

此代码解决了问题，但问题是，它为所有点击的输入提供了相同的颜色。我只希望最后点击的输入颜色和其他应该返回默认值。提前谢谢..

Answer 1

试试这个

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

这是一个有效的例子

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

Answer 2

在设置点击颜色之前，只需重置所有内容：

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

Answer 3

添加代码以在更新当前之前将bacground更改为默认值。我建议你将一组元素缓存在一个变量中（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。

如何选择无线电输入而不是倍数

4 个答案: