Bootstrap 单选按钮结果

Question

基于下面的HTML sn-p，设法得到两行单选按钮。当您单击第一行上的单选按钮，然后继续单击第二行上的任何单选按钮时，第一行上的单选按钮的结果就会消失。 如何确保两行单选按钮的结果一起出现。

<!-- Start first Div -->
<div>
  
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

</div>
<!-- End first Div -->

<!-- Start second Div -->
<div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option1">
  <label class="form-check-label" for="inlineRadio4">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option2">
  <label class="form-check-label" for="inlineRadio5">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
</div>
  
</div>

<!-- End Second Div -->

谢谢

约翰

Answer 1

如the MDN documentation on radio buttons中所述：

单选组是通过给组中的每个单选按钮来定义的 同名。建立无线电组后，选择任何无线电 该组中的按钮会自动取消选择任何当前选择的 同一组中的单选按钮。

因此，如果您希望将第二个 <div> 单选按钮分开，则必须为该组按钮使用不同的 name：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<!-- Start first Div -->
<div>

  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    <label class="form-check-label" for="inlineRadio2">2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
    <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
  </div>

</div>
<!-- End first Div -->

<!-- Start second Div -->
<div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio4" value="option1">
    <label class="form-check-label" for="inlineRadio4">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio5" value="option2">
    <label class="form-check-label" for="inlineRadio5">2</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio6" value="option3" disabled>
    <label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
  </div>

</div>

<!-- End Second Div -->