首页 Bootstrap5组件手册

<div class="form-check">
基础类：
.form-check      排列样式

===========================================================
<!--单选框-->
<input type="radio" class="form-check-input" id="radio1" value="radio1" />
<!--复选框-->
<input type="checkbox" class="form-check-input" id="check1" value="check1" />

基础类：
.form-check-input     单选框样式

属性：
checked               选中，初始默认
disabled              禁止，不可点击

===========================================================
<label class="form-check-label" for="radio1">单选</label>
基础类：
.form-check-label     文本样式
  

单选组：（同一组内只能选择一个）
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="radioA" value="radio1" checked>
  <label class="form-check-label" for="radio1">单选1</label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="radioA" value="radio2">
  <label class="form-check-label" for="radio2">单选2</label>
</div>

注：
1.设 <input>name 同名，表示同一组
2.通常单选框是成组出现
3.<input>id 与 <label>for 关联，文本点击效果

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="check1" name="check1" value="check1" checked>
  <label class="form-check-label" for="check1">复选1</label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="check2" name="check2" value="check2">
  <label class="form-check-label" for="check2">复选2</label>
</div>

注：<input>id 与 <label>for 关联，文本点击效果