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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!