堆栈内存溢出
  简体   繁体   English

单击时永久更改单选按钮的颜色

[英]Change color of a Radio button permanently on click

 原文  2018-01-30 04:11:42  0   5    javascript/ jquery/ css/ twitter-bootstrap

问题描述

Hi I designed a serious of Radio buttons. 嗨，我设计了一个严重的单选按钮。 I want to change the color of radio buttons permanently on click. 我想在单击时永久更改单选按钮的颜色。 Please help me to implement this design. 请帮助我实现此设计。 I have written this code here, Which is not working. 我已经在这里编写了此代码，但无法正常工作。 Any suggestions would be highly appreciated. 任何建议将不胜感激。 

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

5 个解决方案

解决方案1
 2  2018-01-30 04:23:13

You can use add and remove class with siblings like this. 您可以使用具有此类的同级添加和删除类。 

 $('.btn.btn-default').on("click", function() { $(this).addClass('active'); $(this).siblings().removeClass('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>

解决方案2
 1  2018-01-30 04:20:55

I think you only need to change the toggleClass with addClass as you need to change color permanently. 我认为您只需要用addClass更改toggleClass ，因为您需要永久更改颜色。 

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

解决方案3
 1 已采纳  2018-01-30 05:02:25

Try this code, Its working 试试这个代码，它的工作原理 

 $('.btn.btn-default').on("click", function() { //$('button').not(this).removeClass(); $(this).addClass('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>

解决方案4
 0  2018-01-31 02:45:26

In my case, the below solution worked the best. 就我而言，以下解决方案效果最佳。 Thanks all for your valuable inputs. 感谢大家的宝贵意见。 

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

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

     });
  </script>

I added .btn-default CSS class to the style. 我在样式中添加了.btn-default CSS类。

解决方案5
 -1  2018-01-30 04:17:13

You just need to add JQuery after loading the whole body. 您只需要在加载整个主体后添加JQuery。

I think this will help you. 我认为这会对您有所帮助。 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在单击按钮时永久更改颜色 - How to permanently change color on button click 单击时使用多种颜色更改单选按钮颜色 - Change radio button color on click with multiple colors 单选按钮更改颜色 - radio button change color 使用 javascript 或 css 单击时禁用单选按钮并更改颜色 - Disable radio button and change the color when click using javascript or css 更改禁用单选按钮的颜色 - Change the color of disabled radio button jQuery-单击而不是更改的单选按钮 - jQuery - radio button on click and not on change 单击单选按钮更改图像 - on click to radio button change the images 单击按钮可暂时更改div背景颜色，而不是按预期永久更改 - button click temporarily changes div background color, not permanently as intended 在单选按钮上更改jQuery中按钮的颜色 - On radio button change color of button in jquery 单击单选按钮时如何更改背景颜色 - How can I change the background color when I click on a radio button
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM