选择了引导程序多个单选按钮

Blu*_*ity 1 twitter-bootstrap

问题我已经使用没有 javascript 的引导程序创建了两个单选按钮。当我尝试查看并单击单选按钮时。我选择他们两个

这是我的带有单选按钮的 html 代码。我将不胜感激任何可以解决我的问题的建议。谢谢你们

<div class="col-md-2">
    <form role="form">
        <div class="table table-responsive">
            <table class="table">
                <tr class="active">
                    <th>
                        <div class="radio">
                        <label><input type="radio" name="one-way"   >One way</label>
                        </div>
                    </th>
                    <th>
                        <div class="radio">
                        <label><input type="radio" name="roundtrip">Roundtrip</label>
                        </div>
                    </th>
                </tr>
                <tr>
                    <td colspan="2">
                        <label for="start-location">From (Any City or Airport)</label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <select class="form-control" id="start-location">
                            <option class="default"></option>
                            <option>Manila</option>
                            <option>Cebu</option>
                            <option>Cagayan</option>
                            <option>Davao</option>
                            <option>General Santos</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <label for="target-location">To (Any City or Airport)</label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <select class="form-control" id="target-location">
                            <option class="default"></option>
                            <option>Manila</option>
                            <option>Cebu</option>
                            <option>Cagayan</option>
                            <option>Davao</option>
                            <option>General Santos</option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</div>
Run Code Online (Sandbox Code Playgroud)

图片在这里: 在此处输入图片说明

Mik*_*ers 5

如果单选按钮确实代表一个选择,并且您只想选择两个中的一个,则必须为它们提供相同的名称,例如:

 <div class="col-md-2">
  <form role="form">
   <div class="table table-responsive">
    <table class="table">
     <tr class="active">
      <th>
        <div class="radio">
          <label>
            <input type="radio" name="roundtrip">One way</label>
        </div>
      </th>
      <th>
        <div class="radio">
          <label>
            <input type="radio" name="roundtrip">Roundtrip</label>
        </div>
      </th>
    </tr>
    <tr>
      <td colspan="2">
        <label for="start-location">From (Any City or Airport)</label>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <select class="form-control" id="start-location">
          <option class="default"></option>
          <option>Manila</option>
          <option>Cebu</option>
          <option>Cagayan</option>
          <option>Davao</option>
          <option>General Santos</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <label for="target-location">To (Any City or Airport)</label>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <select class="form-control" id="target-location">
          <option class="default"></option>
          <option>Manila</option>
          <option>Cebu</option>
          <option>Cagayan</option>
          <option>Davao</option>
          <option>General Santos</option>
        </select>
      </td>
    </tr>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

这应该可以解决您的问题。

注意单选按钮名称的变化