Question

下面的

是使用引导程序模板的单选按钮组的代码段。但我想要做的是每次切换选项时更改单选按钮的类部分（即选中单选按钮，标签类将是＆＃39; btn btn-primary＆＃39;如果未选中标签类将是＆btn-btn-default＆＃39;）。谁知道如何做到这一点？

<body>
    <div class = "form-group">
        <label class = "control-label col-md-3 col-sm-3 col-xs-12">Gender</label>

        <div class = "col-md-6 col-sm-6 col-xs-12">
            <div id = "gender" class = "btn-group" data-toggle = "buttons">
                <label class = "btn btn-default" data-toggle-active-class = "btn-primary" data-toggle-passive-class = "btn-default">
                    <input type = "radio" name = "gender" value = "male"> &nbsp; Male &nbsp;
                </label>

                <label class = "btn btn-primary" data-toggle-class = "btn-primary" data-toggle-passive-class = "btn-default">
                    <input type = "radio" name = "gender" value = "female"> Female
                </label>
            </div>
        </div>
    </div>
</body>

Answer 1

您可以这样做：

 $('input:radio').change(function(){
      var $self = $(this);
      if ($self.prop('checked')) {
      $('input[type=radio]').parent().removeClass('btn-primary');
         $self.parent().addClass('btn-primary');
      } else {
         $self.parent().removeClass('btn-default');
      }
   });

这里有小提琴代码：https://jsfiddle.net/3r602pcg/

Answer 2

您可以执行以下操作：

$(function(){
    $(".checkbox-class").change(function() {
    $("#gender").toggleClass("show-hide", this.checked)
  }).change();
});

或者您可以使用jQuery

尝试addClass和removeClass方法

Answer 3

您可以使用jquery轻松完成此操作，在底部使用它 -

$('input[type=radio]').each(function(){
     if($(this).prop('checked')){
       $(this).removeClass('btn-default').addClass('btn-primary');
     }else{
       $(this).removeClass('btn-primary').addClass('btn-default');
     }
 });

Answer 4

以下是来自 Minal Chauhan

的固定答案

  $('input:radio').change(function(){
      var $self = $(this);
      if ($self.prop('checked')) {
            $('input[type=radio]').parent().removeClass('btn-primary').addClass('btn-default');
            $self.parent().removeClass('btn-default').addClass('btn-primary');
      }
  });

Answer 5

当您有多个按钮时，上述回复的js不适用。上面的javascript代码将禁用其他按钮的功能。所以改变单选按钮组的标签类的js就像

$('input:radio').change(function(){
  var $self = $(this);
  if ($self.prop('checked')) {
  $self.parent().siblings('label').removeClass('btn-primary');
     $self.parent().addClass('btn-primary');
  } else {
     $self.parent().removeClass('btn-default');
  }

}）;

更改单选按钮组的标签类

5 个答案: