Bluescript Community
Bluescript Community

Reputation: 137

bootstrap multiple radio button selected

Problem i have created two radio buttons using bootstrap without javascript yet. When I tried to view and click radio buttons. I select them both

Here's my html code with radio buttons. I would appreciate any suggestions that would fix my problem. thanks guys

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

Image is here: enter image description here

Upvotes: 1

Views: 10639

Answers (1)

Mike Donkers
Mike Donkers

Reputation: 3699

If the radio buttons indeed stand for a choice and you want only one of the two to be selected you have to give them the same name like:

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

This should resolve your problem.

Note the change in names of the radiobuttons

Upvotes: 6

Related Questions