Bootstrap 单选按钮：在提交表单时获取所选值

Java

使用Bootstrap单选按钮可以方便地在提交表单时获取所选值。Bootstrap是一个流行的前端开发框架，它提供了一系列的样式和组件，用于快速构建响应式网站和应用程序。在表单中使用单选按钮时，我们可以通过JavaScript代码来获取用户选择的值，并进行相应的处理。

在下面的案例中，我们将使用Bootstrap的单选按钮来演示如何获取所选值。假设我们有一个表单，其中包含几个选项，用户需要选择其中一个选项。当用户点击提交按钮时，我们将获取所选值并在页面上显示出来。

首先，我们需要引入Bootstrap的CSS和JavaScript文件。我们可以通过CDN链接或者下载并本地引入文件的方式来使用Bootstrap。接下来，我们创建一个包含单选按钮的表单，每个单选按钮都有一个唯一的值。

<div class="contAIner">
  <form id="myForm">
    <div class="form-group">
      <label for="option1">选项1</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="option" id="option1" value="1">
      </div>
    </div>
    <div class="form-group">
      <label for="option2">选项2</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="option" id="option2" value="2">
      </div>
    </div>
    <div class="form-group">
      <label for="option3">选项3</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="option" id="option3" value="3">
      </div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>

现在我们需要编写JavaScript代码来获取所选值。我们可以使用jQuery来简化代码，首先我们监听表单的提交事件，然后获取所选的单选按钮的值，并将其显示在页面上。

$(document).ready(function() {
  $('#myForm').submit(function(event) {
    event.preventDefault();
    var selectedValue = $('input[name=option]:checked', '#myForm').val();
    $('#result').text('所选值：' + selectedValue);
  });
});

在上面的代码中，我们首先使用event.preventDefault()来阻止表单的默认提交行为。然后，我们使用$('input[name=option]:checked', '#myForm').val()来获取所选按钮的值。最后，我们使用$('#result').text('所选值：' + selectedValue)将所选值显示在页面上的一个元素中。

现在，当用户选择一个选项并点击提交按钮时，所选值将会显示在页面上。

案例演示：

上面的案例中，我们使用了Bootstrap的单选按钮来创建一个表单，其中包含三个选项。当用户选择一个选项并点击提交按钮时，页面上会显示所选值。

通过使用Bootstrap的单选按钮以及JavaScript代码，我们可以在提交表单时轻松地获取所选值。这对于需要根据用户选择进行进一步处理的应用程序非常有用。Bootstrap提供了丰富的样式和组件，使得我们可以快速构建出漂亮且功能强大的前端界面。