Formular mit 5x7 RadioButtons, 2 Abhängigkeiten, Idee gesucht
Ich möchte diese Zuweisung erstellen. Dachte dabei an ein Formular mit 7x5 = 35 Radiobuttons
In jedes Tabellenfeld quasi 1 RadioButton...
Der hier verwendete Code
<style>
table{
border:1px solid black;
border-collapse:collapse;
width:100%;
}
td,th{
border:1px solid black;
}
table {
padding: 50px;
}
td {
text-align: center;
width:calc(100% / 8);
height: 60px;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + .box {
background-color: #6ACD81;
}
.box {
height:100%;
width:100%;
background: #EFF0F1;
transition: all 250ms ease;
text-align: center;
cursor: pointer;
font-weight: 300;
}
</style>
<link rel="stylesheet" href="/css_webseite/all.min.css">
<script src="/js_webseite/jquery.js"></script>
<h3>Klicke auf die Felder</h3>
<table><tr><th></th><th>Quelle1</th> <th>Quelle2</th> <th>Quelle3</th> <th>Quelle4</th> <th>Quelle5</th> <th>Quelle6</th> <th>Quelle7</th></tr>
<tr>
<td>Platz 1</td>
<td><label><input type="radio" class="time_1" name="ws_1" value="WS1 @ Time1" checked><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_1" name="ws_2" value="WS2 @ Time1"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_1" name="ws_3" value="WS3 @ Time1"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_1" name="ws_4" value="WS4 @ Time1"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_1" name="ws_5" value="WS5 @ Time1"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_1" name="ws_6" value="WS6 @ Time1"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_1" name="ws_7" value="WS7 @ Time1"><div class="front-end box"><span>Text</span></div></label></td>
</tr>
<tr>
<td>Platz 2</td>
<td><label><input type="radio" class="time_2" name="ws_1" value="WS1 @ Time2"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_2" name="ws_2" value="WS2 @ Time2"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_2" name="ws_3" value="WS3 @ Time2"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_2" name="ws_4" value="WS4 @ Time2"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_2" name="ws_5" value="WS5 @ Time2"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_2" name="ws_6" value="WS6 @ Time2"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_2" name="ws_7" value="WS7 @ Time2"><div class="front-end box"><span>Text</span></div></label></td>
</tr>
<tr>
<td>Platz 3</td>
<td><label><input type="radio" class="time_3" name="ws_1" value="WS1 @ Time3"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_3" name="ws_2" value="WS2 @ Time3"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_3" name="ws_3" value="WS3 @ Time3"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_3" name="ws_4" value="WS4 @ Time3"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_3" name="ws_5" value="WS5 @ Time3"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_3" name="ws_6" value="WS6 @ Time3"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_3" name="ws_7" value="WS7 @ Time3"><div class="front-end box"><span>Text</span></div></label></td>
</tr>
<tr>
<td>Platz 4</td>
<td><label><input type="radio" class="time_4" name="ws_1" value="WS1 @ Time4"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_4" name="ws_2" value="WS2 @ Time4"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_4" name="ws_3" value="WS3 @ Time4"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_4" name="ws_4" value="WS4 @ Time4"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_4" name="ws_5" value="WS5 @ Time4"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_4" name="ws_6" value="WS6 @ Time4"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_4" name="ws_7" value="WS7 @ Time4"><div class="front-end box"><span>Text</span></div></label></td>
</tr>
<tr>
<td>Platz 5</td>
<td><label><input type="radio" class="time_5" name="ws_1" value="WS1 @ Time5"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_5" name="ws_2" value="WS2 @ Time5"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_5" name="ws_3" value="WS3 @ Time5"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_5" name="ws_4" value="WS4 @ Time5"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_5" name="ws_5" value="WS5 @ Time5"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_5" name="ws_6" value="WS6 @ Time5"><div class="front-end box"><span>Text</span></div></label></td>
<td><label><input type="radio" class="time_5" name="ws_7" value="WS7 @ Time5"><div class="front-end box"><span>Text</span></div></label></td>
</tr>
</table>
<script>
$("input").click(function(){
$("input."+this.className).not($(this)).each(function(){
this.checked = false;
});
});
</script>