41

如果 #1 有效，则如果 #2 无效。检查下面的代码：

<div class="container">
    <div class="row">
        <h1>Radio Group #1</h1>
        <label class="radio-inline">
          <input name="radioGroup" id="radio1" value="option1" type="radio"> 1
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio3" value="option3" type="radio"> 3
        </label>
    </div>
    <div class="row">
        <h1>Radio Group #2</h1>
        <label for="year" class="control-label input-group">Year</label>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input name="year" value="2011" type="radio">2011
            </label>
            <label class="btn btn-default">
                <input name="year" value="2012" type="radio">2012
            </label>
            <label class="btn btn-default">
                <input name="year" value="2013" checked="checked" type="radio">2013
            </label>
        </div>  
    </div>  
</div>

你可以在这里看到它的实际效果：http: //bootply.com/84165

4

5 回答 5

78

假设您要检查默认按钮。

<div class="row">
    <h1>Radio Group #2</h1>
    <label for="year" class="control-label input-group">Year</label>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
            <input type="radio" name="year" value="2011">2011
        </label>
        <label class="btn btn-default">
            <input type="radio" name="year" value="2012">2012
        </label>
        <label class="btn btn-default active">
            <input type="radio" name="year" value="2013" checked="">2013
        </label>
    </div>
  </div>

将类添加到您希望默认active的按钮（标签）及其标签中，以便默认情况下以表单形式提交。labelchecked=""input

于 2013-09-30T20:30:22.597 回答
15

将“活动”类应用于作为检查输入的父级的所有标签的 javascript 修复：

$(':input:checked').parent('.btn').addClass('active');

紧接着插入

$('.btn').button();
于 2014-02-09T20:28:46.950 回答
2

您必须在标签中使用 active 才能使其按上述方式工作。但是你可以使用checked="checked"，它也可以工作。这不是必需的，但它更清晰，更有意义，因为它更符合 html 格式。

于 2015-08-12T14:00:12.757 回答
1

使用带有标签的活动类使其自动选择和使用。checked=""

   <label class="btn btn-primary  active" value="regular"  style="width:47%">
   <input  type="radio" name="service" checked=""  > Regular </label>
   <label class="btn btn-primary " value="express" style="width:46%">
   <input type="radio" name="service"> Express </label>
于 2015-07-07T06:26:28.403 回答
0

如果您想使用引导无线电来检查其中之一，则取决于您在 .ts 文件中检查的 var 的结果。

组件.html

<h1>Radio Group #1</h1>
<div class="btn-group btn-group-toggle" data-toggle="buttons" >
   <label [ngClass]="checked ? 'active' : ''" class="btn btn-outline-secondary">
     <input name="radio" id="radio1" value="option1" type="radio"> TRUE
   </label>
   <label [ngClass]="!checked ? 'active' : ''" class="btn btn-outline-secondary">
     <input name="radio" id="radio2" value="option2" type="radio"> FALSE
   </label>
</div>

组件.ts 文件

@Component({
  selector: '',
  templateUrl: './.component.html',
  styleUrls: ['./.component.css']
})
export class radioComponent implements OnInit {
  checked = true;
}
于 2020-09-26T09:14:24.103 回答