我正在做一个学校考勤系统。使用单选按钮，教师可以将学生标记为出勤类型之一（从数据库中提取）。我想将单选按钮格式化为按钮的样式，但这样做时，我只能为第一个学生进行选择。
下面是我的嵌入式样式表：

<style type="text/css">
            .radio-button { margin: 10px;}

            .radio-button input[type="radio"] {
                            opacity: 0;
                            position: fixed;
                            width: 0;
                                                }

            .radio-button label {
                            display: inline-block;
                            background-color: #ddd;
                            padding: 10px 20px;
                            font-family: sans-serif, Arial;
                            font-size: 16px;
                            border: 2px solid #444;
                            border-radius: 4px;
                                }

            .radio-button label:hover {
                            background-color: #dfd;
                                        }

            .radio-button input[type="radio"]:focus + label {
                            border: 2px dashed #444;
                                                            }

            .radio-button input[type="radio"]:checked + label {
                            background-color: #bfb;
                            border-color: #4c4;
                                                                } 
        </style>

字符串
下面是我的单选按钮代码：

{% for student in list_of_students %}
                    <tr>
                        <td>{{student}}</td>
                        <td>
                                    <div class="radio-button">
                                        {% for attendanceType in list_of_attendanceTypes %}
                                            <input type="radio" name='{{student.ssystudentid}}_attendancetype' id={{attendanceType}} value={{attendanceType.attendancetypeid}}>
                                            <label for={{attendanceType}}> {{attendanceType}}</label>
                                        {% endfor %}
                                    </div>
                        </td>

型
我在标签周围移动，因为我认为它们是问题的根源，但它似乎不起作用。
下面是它现在的样子：
任何建议将不胜感激。