Question

如果＃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

Answer 1

假设您要检查默认按钮。

<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类添加到您希望默认的按钮（label标记），并将checked=""添加到其input标记，以便默认情况下在表单中提交。< / p>

Answer 2

一个javascript修复程序，将'active'类应用于作为已检查输入父项的所有标签：

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

在

之后插入

$('.btn').button();

Answer 3

您必须在标签中使用active才能使其按上述方式工作。但你可以使用checked =＆＃34; check＆＃34;它也会起作用。它没有必要，但它更易读，更有意义，因为它更符合HTML格式。

Answer 4

将有效类与标签一起使用，使其自动选择并使用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>

Answer 5

如果要使用引导程序无线电检查其中之一，则取决于.ts文件中已检查的var的结果。

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

component.ts文件

@Component({
  selector: '',
  templateUrl: './.component.html',
  styleUrls: ['./.component.css']
})
export class radioComponent implements OnInit {
  checked = true;
}

Bootstrap单选按钮“已选中”标志

5 个答案: