表格中的Checked单选按钮无法显示

时间:2016-09-27 16:06:16

标签: html

我的下表中有一个表单元格内的单选按钮。出于某种原因,实际上只检查了最后一个单选按钮。

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

以下是我看到https://jsfiddle.net/3aj4azkj/1/

的示例

有谁知道为什么会这样?

2 个答案:

答案 0 :(得分:2)

因为所有无线电盒的名称都相同。更改每个集的名称。 请参阅代码段。

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

答案 1 :(得分:1)

您必须为按钮使用不同的名称。

例如,调用第一个单选按钮&#34; used1&#34;等等它会起作用