html表中单选按钮的实现.问题:所有人都在选择，而不是选择一个

Question

Hi图像，显示一次选择的所有单选按钮
我在表中为每一行实现了单选按钮。我想一次只选择一行，但单击时所有行都处于选中状态，而不是只选择一个然后取消选择另一行
这是代码。

<table class="table">
    <thead>
        <tr>
            <th width="50"></th>
            <th>Device ID <span class="caret"></span></th>
            <th>Device Name <span class="caret"></span></th>
            <th>Work URL <span class="caret"></span></th>
            <th>MSISDN <span class="caret"></span></th>
            <th width="200">Network <span class="caret"></span></th>
            <th>Region <span class="caret"></span></th>
        </tr>
        <tr>
            <th class="text-center"><div class="radio radio-circle"><input type="radio" id="radio99"><label for="radio99"></label></div></th>
            <th><label class="hide" for="deviceID">Device ID</label><input type="text" class="device_col_search" id="deviceID" name="deviceId"></th>
            <th><label class="hide" for="deviceName">Device Name</label><input type="text" class="device_col_search" id="deviceName" name="deviceName"></th>
            <th><label class="hide" for="workurl">all</label><input type="text" class="device_col_search" id="workurl" name="workurl"></th>
            <th><label class="hide" for="msisdn">all</label><input type="text" class="device_col_search" id="msisdn" name="msisdn"></th>
            <th><label class="hide" for="network">all</label><input type="text" class="device_col_search" id="network" name="network"></th>
            <th><label class="hide" for="region">all</label><input type="text" class="device_col_search" id="region" name="region"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio4"><label for="radio4"></label></div></td>
            <td>4</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio5"><label for="radio5"></label></div></td>
            <td>5</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio6"><label for="radio6"></label></div></td>
            <td>6</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio7"><label for="radio7"></label></div></td>
            <td>7</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio8"><label for="radio8"></label></div></td>
            <td>8</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio9"><label for="radio9"></label></div></td>
            <td>9</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio10"><label for="radio10"></label></div></td>
            <td>10</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio11"><label for="radio11"></label></div></td>
            <td>11</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio12"><label for="radio12"></label></div></td>
            <td>12</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio13"><label for="radio13"></label></div></td>
            <td>13</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio14"><label for="radio14"></label></div></td>
            <td>14</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
        <tr>
            <td><div class="radio radio-circle"><input type="radio" id="radio15"><label for="radio15"></label></div></td>
            <td>15</td>
            <td>Unknown</td>
            <td></td>
            <td>6822201112</td>
            <td>Jmeter Home Carrier</td>
            <td></td>
        </tr>
    </tbody>
</table>

  [1]: https://i.stack.imgur.com/tuarr.jpg

Answer 1

您必须在要分组的radio buttons上放置一个通用名称。

类似：

<input type="radio" id="radio4" name="radio" />
<input type="radio" id="radio5" name="radio" />
<input type="radio" id="radio6" name="radio" />
....
....

Answer 2

您必须在单选按钮中添加名称作为：

<input type="radio" name="radio" id="radio1"/> 

之后，您可以添加一个标签或值。

Answer 3

您必须为单选按钮添加通用名称，name就是属性。

<input type="radio" id="radio5" value="5" name="5">5
<input type="radio" id="radio6" value="6" name="5">6
<input type="radio" id="radio7" value="7" name="5">7