Question

您好我设计了一个严肃的单选按钮。我想在点击时永久更改单选按钮的颜色。请帮我实现这个设计。我在这里写了这段代码，但是没有用。任何建议都将受到高度赞赏。

$('.btn.btn-default').on("click", function() {
  //$('button').not(this).removeClass();
  $(this).toggleClass('active');

});

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default">
        <input type="radio" name="options" id="option1" autocomplete="off" checked>
      </label>
      <label class="btn btn-default">
    	<input type="radio" name="options" id="option2" autocomplete="off">
      </label>
      <label class="btn btn-default">
    	<input type="radio" name="options" id="option3" autocomplete="off">
      </label>
      <label class="btn btn-default">
        <input type="radio" name="options" id="option4" autocomplete="off">
      </label>
    </div>
  </div>
</div>

Answer 1

你可以使用像这样的兄弟姐妹添加和删除类。

＆＃13;

$('.btn.btn-default').on("click", function() {
  $(this).addClass('active');
  $(this).siblings().removeClass('active')

});

＆＃13;

.active {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default">
    									<input type="radio" name="options" id="option1" autocomplete="off" checked>
    								</label>
      <label class="btn btn-default">
    									<input type="radio" name="options" id="option2" autocomplete="off">
    								</label>
      <label class="btn btn-default">
    									<input type="radio" name="options" id="option3" autocomplete="off">
    								</label>
      <label class="btn btn-default">
    									<input type="radio" name="options" id="option4" autocomplete="off">
    								</label>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我认为您只需要使用toggleClass更改addClass，因为您需要永久更改颜色。

$('.btn.btn-default').on("click", function() {
  $(this).addClass('active');
});

Answer 3

试用此代码，正常工作

＆＃13;

$('.btn.btn-default').on("click", function() {
  //$('button').not(this).removeClass();
  $(this).addClass('active');

});

＆＃13;

.active {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default">
        <input type="radio" name="options" id="option1" autocomplete="off" checked>
      </label>
      <label class="btn btn-default">
    	<input type="radio" name="options" id="option2" autocomplete="off">
      </label>
      <label class="btn btn-default">
    	<input type="radio" name="options" id="option3" autocomplete="off">
      </label>
      <label class="btn btn-default">
        <input type="radio" name="options" id="option4" autocomplete="off">
      </label>
    </div>
  </div>
</div>

＆＃13;

Answer 4

就我而言，以下解决方案效果最佳。感谢所有宝贵的意见。

 <style>
     .btn-default.active{background-color:blue;}
  </style>

  <script>
     $('.btn.btn-default').on("click",function(){  
       //$('button').not(this).removeClass();
       $(this).addClass('active');

     });
  </script>

我在样式中添加了.btn-default CSS类。

Answer 5

您只需在加载整个主体后添加JQuery。

我认为这会对你有所帮助。

<!DOCTYPE html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   </head>
   <body>
      <style>
         .active{background-color:red;}
      </style>
      <div class="container">
         <div class="row">
            <div class="btn-group btn-group-justified" data-toggle="buttons">
               <label class="btn btn-default">
               <input type="radio" name="options" id="option1" autocomplete="off" checked>
               </label>
               <label class="btn btn-default">
               <input type="radio" name="options" id="option2" autocomplete="off">
               </label>
               <label class="btn btn-default">
               <input type="radio" name="options" id="option3" autocomplete="off">
               </label>
               <label class="btn btn-default">
               <input type="radio" name="options" id="option4" autocomplete="off">
               </label>
            </div>
         </div>
      </div>
      <script>
         $('.btn.btn-default').on("click",function(){  
           //$('button').not(this).removeClass();
           $(this).toggleClass('active');
         
         });
      </script>
   </body>
</html>

点击

5 个答案: