Format radio button like button in for loop

Question

I am working on a school attendance system. Using radio buttons, teachers can mark students as one of the attendance types (pulled from the database). I would like to have my radio buttons formatted to look like buttons, but when I do so, I can only make a selection for the first student.

Below is my embedded stylesheet:

<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>

Below is my code for the radio buttons:

{% 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>

I moved around the tags because I thought that they were the root of the problem, but it did not seem to work.

Below is an image of how it looks right now:

Any advice would be appreciated.

Answer 1

You need to have unique name for each group set of radio buttons, unique id for each radio button in each radio button group, and your label must associate to corresponding radio button input. Showing as below:

First student has a three radio button set name "student1_attendancetype", each button has unique id and the label link to these id.

Try modify your code based on the example below

.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;
}

<tr>
  <td>student1</td>
  <td>
    <div class="radio-button">

      <input type="radio" name='student1_attendancetype' id="student1_type1" value="Present">
      <label for="student1_type1"> Present </label>

      <input type="radio" name='student1_attendancetype' id="student1_type2" value="Absent">
      <label for="student1_type2"> Absent </label>

      <input type="radio" name='student1_attendancetype' id="student1_type3" value="Late">
      <label for="student1_type3"> Late </label>
    </div>
  </td>

</tr>
<tr>
  <td>student2</td>
  <td>
    <div class="radio-button">

      <input type="radio" name='student2_attendancetype' id="student2_type1" value="Present">
      <label for="student2_type1"> Present </label>

      <input type="radio" name='student2_attendancetype' id="student2_type2" value="Absent">
      <label for="student2_type2"> Absent </label>

      <input type="radio" name='student2_attendancetype' id="student2_type3" value="Late">
      <label for="student2_type3"> Late </label>
    </div>
  </td>
</tr>