HTML,table 内的无线电输入问题
HTML, issue with radio input within a table
我稍微修改了以下代码(使 table 具有垂直 header):
http://codepen.io/chriscoyier/pen/Fapif
我的输出是:
https://jsfiddle.net/av2ptwqv/
我的代码是:
<html>
<head>
<meta charset="utf-8">
<title>
Newsletter generator v2
</title>
<style>
.table-header-rotated {
border-collapse: collapse;
}
.table-header-rotated td {
width: 30px;
}
.table-header-rotated th {
padding: 5px 10px;
}
.table-header-rotated td {
text-align: center;
padding: 10px 5px;
border: 1px solid #ccc;
}
.table-header-rotated th.rotate {
height: 140px;
white-space: nowrap;
}
.table-header-rotated th.rotate > div {
-webkit-transform: translate(25px, 51px) rotate(315deg);
-ms-transform: translate(25px, 51px) rotate(315deg);
transform: translate(25px, 51px) rotate(315deg);
width: 30px;
}
.table-header-rotated th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
.table-header-rotated th.row-header {
padding: 0 10px;
border-bottom: 1px solid #ccc;
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<table class="table-header-rotated">
<thead>
<tr>
<!-- First column header is not rotated -->
<th></th>
<!-- Following headers are rotated -->
<th class="rotate">
<div><span>Column header 1</span></div>
</th>
<th class="rotate">
<div><span>Column header 2</span></div>
</th>
<th class="rotate">
<div><span>Column header 3</span></div>
</th>
<th class="rotate">
<div><span>Column header 4</span></div>
</th>
<th class="rotate">
<div><span>Column header 5</span></div>
</th>
<th class="rotate">
<div><span>Column header 6</span></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="row-header">Row header 1</th>
<td>
<input checked="checked" name="column1[]" type="radio" value="row1-column1">
</td>
<td>
<input checked="checked" name="column2[]" type="radio" value="row1-column2">
</td>
<td>
<input name="column3[]" type="radio" value="row1-column3">
</td>
<td>
<input name="column4[]" type="radio" value="row1-column4">
</td>
<td>
<input name="column5[]" type="radio" value="row1-column5">
</td>
<td>
<input name="column6[]" type="radio" value="row1-column6">
</td>
</tr>
<tr>
<th class="row-header">Row header 2</th>
<td>
<input name="column1[]" type="radio" value="row2-column1">
</td>
<td>
<input name="column2[]" type="radio" value="row2-column2">
</td>
<td>
<input checked="checked" name="column3[]" type="radio" value="row2-column3">
</td>
<td>
<input checked="checked" name="column4[]" type="radio" value="row2-column4">
</td>
<td>
<input name="column5[]" type="radio" value="row2-column5">
</td>
<td>
<input name="column6[]" type="radio" value="row2-column6">
</td>
</tr>
<tr>
<th class="row-header">Row header 3</th>
<td>
<input name="column1[]" type="radio" value="row3-column1">
</td>
<td>
<input name="column2[]" type="radio" value="row3-column2">
</td>
<td>
<input name="column3[]" type="radio" value="row3-column3">
</td>
<td>
<input name="column4[]" type="radio" value="row3-column4">
</td>
<td>
<input checked="checked" name="column5[]" type="radio" value="row3-column5">
</td>
<td>
<input checked="checked" name="column6[]" type="radio" value="row3-column6">
</td>
</tr>
</tbody>
</table>
</body>
</html>
我的问题很简单:所以现在我们每行只能有一个唯一选择,我们如何才能将其变成每行有一个唯一选择?
为应该分组的单选按钮命名。像这样:
<tbody>
<tr>
<th class="row-header">Row header 1</th>
<td><input checked="checked" name="line1[]" type="radio" value="row1-column1" /></td>
<td><input name="line1[]" type="radio" value="row1-column2" /></td>
<td><input name="line1[]" type="radio" value="row1-column3" /></td>
<td><input name="line1[]" type="radio" value="row1-column4" /></td>
<td><input name="line1[]" type="radio" value="row1-column5" /></td>
<td><input name="line1[]" type="radio" value="row1-column6" /></td>
</tr>
<tr>
<th class="row-header">Row header 2</th>
<td><input name="line2[]" type="radio" value="row2-column1" /></td>
<td><input name="line2[]" type="radio" value="row2-column2" /></td>
<td><input checked="checked" name="line2[]" type="radio" value="row2-column3" /></td>
<td><input name="line2[]" type="radio" value="row2-column4" /></td>
<td><input name="line2[]" type="radio" value="row2-column5" /></td>
<td><input name="line2[]" type="radio" value="row2-column6" /></td>
</tr>
<tr>
<th class="row-header">Row header 3</th>
<td><input name="line3[]" type="radio" value="row3-column1" /></td>
<td><input name="line3[]" type="radio" value="row3-column2" /></td>
<td><input name="line3[]" type="radio" value="row3-column3" /></td>
<td><input name="line3[]" type="radio" value="row3-column4" /></td>
<td><input checked="checked" name="line3[]" type="radio" value="row3-column5" /></td>
<td><input name="line3[]" type="radio" value="row3-column6" /></td>
</tr>
</tbody>
电台输入按name
标签分组,分组只能选择一个。
所以你要做的是在同一行的每个无线电输入上给出相同的 name
标签。
就这么简单。
我稍微修改了以下代码(使 table 具有垂直 header):
http://codepen.io/chriscoyier/pen/Fapif
我的输出是:
https://jsfiddle.net/av2ptwqv/
我的代码是:
<html>
<head>
<meta charset="utf-8">
<title>
Newsletter generator v2
</title>
<style>
.table-header-rotated {
border-collapse: collapse;
}
.table-header-rotated td {
width: 30px;
}
.table-header-rotated th {
padding: 5px 10px;
}
.table-header-rotated td {
text-align: center;
padding: 10px 5px;
border: 1px solid #ccc;
}
.table-header-rotated th.rotate {
height: 140px;
white-space: nowrap;
}
.table-header-rotated th.rotate > div {
-webkit-transform: translate(25px, 51px) rotate(315deg);
-ms-transform: translate(25px, 51px) rotate(315deg);
transform: translate(25px, 51px) rotate(315deg);
width: 30px;
}
.table-header-rotated th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
.table-header-rotated th.row-header {
padding: 0 10px;
border-bottom: 1px solid #ccc;
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<table class="table-header-rotated">
<thead>
<tr>
<!-- First column header is not rotated -->
<th></th>
<!-- Following headers are rotated -->
<th class="rotate">
<div><span>Column header 1</span></div>
</th>
<th class="rotate">
<div><span>Column header 2</span></div>
</th>
<th class="rotate">
<div><span>Column header 3</span></div>
</th>
<th class="rotate">
<div><span>Column header 4</span></div>
</th>
<th class="rotate">
<div><span>Column header 5</span></div>
</th>
<th class="rotate">
<div><span>Column header 6</span></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="row-header">Row header 1</th>
<td>
<input checked="checked" name="column1[]" type="radio" value="row1-column1">
</td>
<td>
<input checked="checked" name="column2[]" type="radio" value="row1-column2">
</td>
<td>
<input name="column3[]" type="radio" value="row1-column3">
</td>
<td>
<input name="column4[]" type="radio" value="row1-column4">
</td>
<td>
<input name="column5[]" type="radio" value="row1-column5">
</td>
<td>
<input name="column6[]" type="radio" value="row1-column6">
</td>
</tr>
<tr>
<th class="row-header">Row header 2</th>
<td>
<input name="column1[]" type="radio" value="row2-column1">
</td>
<td>
<input name="column2[]" type="radio" value="row2-column2">
</td>
<td>
<input checked="checked" name="column3[]" type="radio" value="row2-column3">
</td>
<td>
<input checked="checked" name="column4[]" type="radio" value="row2-column4">
</td>
<td>
<input name="column5[]" type="radio" value="row2-column5">
</td>
<td>
<input name="column6[]" type="radio" value="row2-column6">
</td>
</tr>
<tr>
<th class="row-header">Row header 3</th>
<td>
<input name="column1[]" type="radio" value="row3-column1">
</td>
<td>
<input name="column2[]" type="radio" value="row3-column2">
</td>
<td>
<input name="column3[]" type="radio" value="row3-column3">
</td>
<td>
<input name="column4[]" type="radio" value="row3-column4">
</td>
<td>
<input checked="checked" name="column5[]" type="radio" value="row3-column5">
</td>
<td>
<input checked="checked" name="column6[]" type="radio" value="row3-column6">
</td>
</tr>
</tbody>
</table>
</body>
</html>
我的问题很简单:所以现在我们每行只能有一个唯一选择,我们如何才能将其变成每行有一个唯一选择?
为应该分组的单选按钮命名。像这样:
<tbody>
<tr>
<th class="row-header">Row header 1</th>
<td><input checked="checked" name="line1[]" type="radio" value="row1-column1" /></td>
<td><input name="line1[]" type="radio" value="row1-column2" /></td>
<td><input name="line1[]" type="radio" value="row1-column3" /></td>
<td><input name="line1[]" type="radio" value="row1-column4" /></td>
<td><input name="line1[]" type="radio" value="row1-column5" /></td>
<td><input name="line1[]" type="radio" value="row1-column6" /></td>
</tr>
<tr>
<th class="row-header">Row header 2</th>
<td><input name="line2[]" type="radio" value="row2-column1" /></td>
<td><input name="line2[]" type="radio" value="row2-column2" /></td>
<td><input checked="checked" name="line2[]" type="radio" value="row2-column3" /></td>
<td><input name="line2[]" type="radio" value="row2-column4" /></td>
<td><input name="line2[]" type="radio" value="row2-column5" /></td>
<td><input name="line2[]" type="radio" value="row2-column6" /></td>
</tr>
<tr>
<th class="row-header">Row header 3</th>
<td><input name="line3[]" type="radio" value="row3-column1" /></td>
<td><input name="line3[]" type="radio" value="row3-column2" /></td>
<td><input name="line3[]" type="radio" value="row3-column3" /></td>
<td><input name="line3[]" type="radio" value="row3-column4" /></td>
<td><input checked="checked" name="line3[]" type="radio" value="row3-column5" /></td>
<td><input name="line3[]" type="radio" value="row3-column6" /></td>
</tr>
</tbody>
电台输入按name
标签分组,分组只能选择一个。
所以你要做的是在同一行的每个无线电输入上给出相同的 name
标签。
就这么简单。