Samantha Samantha - 2 months ago 7
HTML Question

Checked Radio button inside table does not visualize

I have the following table with radio buttons inside a table cell. For some reason only the last radio button actually visually is checked.

<table class="QueryInfo" id="FreezerInfo">
<thead>
<tr>
<th></th>
<th>Number</th>
<th>Time</th>
<th>Used</th>
</tr>
</thead>

<tbody>

<tr>
<td>1</td>
<td>20096</td>
<td>2016-09-27 10:13:48</td>
<td>
<div class="radio">
<label class="radio-inline">
<input type="radio" id='used_no' name="used" value="0" checked >No</input>
</label>
<label class="radio-inline">
<input type="radio" id='used_yes' name="used" value="1" >Yes</input>
</label>

</div>

</td>
</tr>


<tr>
<td>2</td>
<td>20097</td>
<td>2016-09-27 10:13:48</td>
<td>
<div class="radio">
<label class="radio-inline">
<input type="radio" id='used_no' name="used" value="0" checked >No</input>
</label>
<label class="radio-inline">
<input type="radio" id='used_yes' name="used" value="1" >Yes</input>
</label>

</div>

</td>
</tr>


<tr>
<td>3</td>
<td>20098</td>
<td>2016-09-27 10:13:48</td>
<td>
<div class="radio">
<label class="radio-inline">
<input type="radio" id='used_no' name="used" value="0" checked >No</input>
</label>
<label class="radio-inline">
<input type="radio" id='used_yes' name="used" value="1" >Yes</input>
</label>

</div>

</td>
</tr>


<tr>
<td>4</td>
<td>20099</td>
<td>2016-09-27 10:13:48</td>
<td>
<div class="radio">
<label class="radio-inline">
<input type="radio" id='used_no' name="used" value="0" checked >No</input>
</label>
<label class="radio-inline">
<input type="radio" id='used_yes' name="used" value="1" >Yes</input>
</label>

</div>

</td>
</tr>


<tr>
<td>5</td>
<td>20100</td>
<td>2016-09-27 10:13:48</td>
<td>
<div class="radio">
<label class="radio-inline">
<input type="radio" id='used_no' name="used" value="0" checked >No</input>
</label>
<label class="radio-inline">
<input type="radio" id='used_yes' name="used" value="1" >Yes</input>
</label>

</div>

</td>
</tr>

</tbody>
</table>


Here is an example of what I'm seeing https://jsfiddle.net/3aj4azkj/1/

Does anyone know why this is happening?

Answer

Because names of all radio boxes are same. Change the name of each set. See code snippet.

<table class="QueryInfo" id="FreezerInfo">
     <thead>
          <tr>
               <th></th>
               <th>Number</th>
               <th>Time</th>
               <th>Used</th>
          </tr>
     </thead>

     <tbody>

          <tr>
               <td>1</td>
               <td>20096</td>
               <td>2016-09-27 10:13:48</td>
               <td>
                    <div class="radio">
                         <label class="radio-inline">
                              <input type="radio" id='used_no' name="used" value="0"  checked >No</input>
                         </label>
                         <label class="radio-inline">
                              <input type="radio" id='used_yes' name="used" value="1" >Yes</input>
                         </label>

                    </div>

               </td>
          </tr>


          <tr>
               <td>2</td>
               <td>20097</td>
               <td>2016-09-27 10:13:48</td>
               <td>
                    <div class="radio">
                         <label class="radio-inline">
                              <input type="radio" id='used_no' name="used1" value="0"  checked >No</input>
                         </label>
                         <label class="radio-inline">
                              <input type="radio" id='used_yes' name="used1" value="1" >Yes</input>
                         </label>

                    </div>

               </td>
          </tr>


          <tr>
               <td>3</td>
               <td>20098</td>
               <td>2016-09-27 10:13:48</td>
               <td>
                    <div class="radio">
                         <label class="radio-inline">
                              <input type="radio" id='used_no' name="used2" value="0"  checked >No</input>
                         </label>
                         <label class="radio-inline">
                              <input type="radio" id='used_yes' name="used2" value="1" >Yes</input>
                         </label>

                    </div>

               </td>
          </tr>


          <tr>
               <td>4</td>
               <td>20099</td>
               <td>2016-09-27 10:13:48</td>
               <td>
                    <div class="radio">
                         <label class="radio-inline">
                              <input type="radio" id='used_no' name="used3" value="0"  checked >No</input>
                         </label>
                         <label class="radio-inline">
                              <input type="radio" id='used_yes' name="used3" value="1" >Yes</input>
                         </label>

                    </div>

               </td>
          </tr>


          <tr>
               <td>5</td>
               <td>20100</td>
               <td>2016-09-27 10:13:48</td>
               <td>
                    <div class="radio">
                         <label class="radio-inline">
                              <input type="radio" id='used_no' name="used4" value="0"  checked >No</input>
                         </label>
                         <label class="radio-inline">
                              <input type="radio" id='used_yes' name="used4" value="1" >Yes</input>
                         </label>

                    </div>

               </td>
          </tr>

     </tbody>
</table>

Comments