更改单选按钮组的标签类-Java 学习之路

下面是使用引导程序模板的单选按钮组的代码片段 . 但我想要做的是每次切换选项时更改单选按钮的类部分（即选中单选按钮，标签类将是'btn btn-primary'，如果未选中标签类将是'btn btn-默认'） . 谁知道怎么做到这一点？

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

5 回答

您可以使用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');
     }
 });

回复于 2024-05-06T17:50:04+08:00

你可以这样做：

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

回复于 2024-05-06T17:50:04+08:00

您可以执行以下操作：

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

或者您可以使用jQuery尝试 addClass 和 removeClass 方法

回复于 2024-05-06T17:50:04+08:00

以下是 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');
      }
  });

回复于 2024-05-06T17:50:04+08:00

当您有多个按钮时，上述回复的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');
  }

}）;

回复于 2024-05-06T17:50:04+08:00

更改单选按钮组的标签类

5 回答

相关问题