我把一组单选按钮放在表格中,代码是这样的:
<table class="table table-responsive">
<thead>
<tr>
<th>Courier</th>
<th>Service</th>
</tr>
</thead>
<tbody>
<form>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="optradio">TIKI</label>
</div>
</td>
<td>
Regular Shipping
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="optradio">JNE</label>
</div>
</td>
<td>
Express Shipping
</td>
</tr>
</form>
</tbody>
</table>
当我单击Courier单元格中的一个例如JNE时,按钮被选中,现在我想在单击快速运输时也选择该按钮,我该如何制作呢?并且服务列的垂直对齐与Courier列没有相同的高度,如何解决?我使用bootstrap。
答案 0 :(得分:14)
这可以使用label for
来完成请参阅以下代码并运行以下代码片段::
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<table class="table table-responsive">
<thead>
<tr>
<th>Courier</th>
<th>Service</th>
</tr>
</thead>
<tbody>
<form>
<tr>
<td>
<div class="radio">
<label><input type="radio" id='regular' name="optradio">TIKI</label>
</div>
</td>
<td>
<div class="radiotext">
<label for='regular'>Regular Shipping</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" id='express' name="optradio">JNE</label>
</div>
</td>
<td>
<div class="radiotext">
<label for='express'>Express Shipping</label>
</div>
</td>
</tr>
</form>
</tbody>
</table>
&#13;
<div id="wtf" style="margin-top:5%; display:block; float:left; width:auto; height:auto; background:whitesmoke;">
<div style="width:33%;">
<div class="block">
some content
</div>
</div>
<div style="float:left; width:33%;">
<div class="block">
some content
</div></div>
<div style="float:left; width:33%;">
<div class="block">
some content
</div></div>
</div>
&#13;
如您所见,您现在可以点击快递和常规送货,按要求选择单选按钮。
答案 1 :(得分:8)
您可以使用jQuery,这样就可以选择整个row
,而不仅仅是输入或标签。见例。
$('.table tbody tr').click(function(event) {
if (event.target.type !== 'radio') {
$(':radio', this).trigger('click');
}
});
.table-responsive tbody tr {
cursor: pointer;
}
.table-responsive .table thead tr th {
padding-top: 15px;
padding-bottom: 15px;
}
.table-responsive .table tbody tr td {
padding-top: 15px;
padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Courier</th>
<th>Service</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="radios" id="radio1" />
<label for="radio1">TIKI</label>
</td>
<td>Regular Shipping</td>
</tr>
<tr>
<td>
<input type="radio" name="radios" id="radio2" />
<label for="radio2">JNE</label>
</td>
<td>Express Shipping</td>
</tr>
</tbody>
</table>
</div>
答案 2 :(得分:0)
使用此代码修复问题
$('.table tbody tr td').click(function (event) {
if (event.target.type !== 'radio') {
$(':radio', this).trigger('click');
}
});