bootsrap from表单如何编写单选框

在 Bootstrap 中，可以使用以下代码来创建单选框：

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Option 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Option 2
  </label>
</div>

其中，`form-check` 类用于包含单选框和标签，`form-check-input` 类用于单选框，`form-check-label` 类用于标签。

`name` 属性用于指定单选框的名称，`id` 属性用于指定单选框的唯一标识符，`value` 属性用于指定单选框的值，`checked` 属性用于指定默认选中的单选框。

相关问题

bootstrap 单选框赋值

如果你想使用 Bootstrap 的单选框，你可以使用以下 HTML 代码：

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
  <label class="form-check-label" for="exampleRadios1">
    Option 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Option 2
  </label>
</div>

如果你想设置单选框的默认值，你可以在其中一个单选框中添加 `checked` 属性，如下所示：

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Option 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Option 2
  </label>
</div>

如果你想使用 JavaScript 动态设置单选框的值，你可以使用以下代码：

document.getElementById("exampleRadios1").checked = true;

这将设置 ID 为 `exampleRadios1` 的单选框为选中状态。

bootstrap4 单选框样式更改

可以使用 Bootstrap 4 中的 `custom-control` 和 `custom-radio` 类来更改单选框的样式。

以下是一个示例代码，演示如何更改单选框的样式：

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">选项1</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">选项2</label>
</div>

你可以使用自定义样式来更改单选框的外观，例如更改颜色、大小和形状等。例如，你可以添加以下 CSS 样式来更改单选框的颜色：

.custom-control-input:checked~.custom-control-label::before {
  background-color: #007bff;
  border-color: #007bff;
}

这将更改选中单选框的颜色为 Bootstrap 4 默认的主题颜色。