Question

问题我在没有javascript的情况下使用bootstrap创建了两个单选按钮。当我尝试查看并单击单选按钮时。我选择它们

这是带有单选按钮的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>

图片在这里：

Answer 1

如果单选按钮确实代表您的选择并且您只想要选择其中一个，那么您必须为它们指定相同的名称，如：

 <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>

这可以解决您的问题。

注意无线电按钮名称的更改

选择bootstrap多个单选按钮

1 个答案: