Reputation: 137
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>
Upvotes: 1
Views: 10639
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