如何将表格项目设为单选按钮？

Question

如何使此图像的每个块充当单选按钮？

 <table class="table table-bordered">
               <tbody>
                 <tr class="category-item">
                   <td>
                     <input id="input-1" type="radio" name="list" value="" />
                     <label for="input-1">IT Solutions</label>
                   </td>
                   <td>
                     <input id="input-1" type="radio" name="list" value="" />
                     <label for="input-1">Household</label>
                   </td>
                   <td>
                     <input id="input-1" type="radio" name="list" value="" />
                     <label for="input-1">Design &amp; Multimedia</label>
                   </td>
                  </tr> 
                  <tr class="category-item">
                   <td>
                     <input id="input-1" type="radio" name="list" value="" />
                     <label for="input-1">Event &amp; photography</label>
                   </td>
                   <td>
                     <input id="input-1" type="radio" name="list" value="" />
                     <label for="input-1">Sales &amp; Marketing</label>
                   </td>
                   <td>
                     <input id="input-1" type="radio" name="list" value="" />
                     <label for="input-1">Engineering &amp; Architecture</label>
                   </td>
                  </tr>
                  <tr class="category-item">
                   <td>
                     <input id="input-1" type="radio" name="list" value="" />
                     <label for="input-1">Writing &amp; Translation</label>
                   </td>
                   <td>
                     <input id="input-1" type="radio" name="list" value="" />
                     <label for="input-1">Finance &amp; Accounting</label>
                   </td>
                   <td>
                     <input id="input-1" type="radio" name="list" value="" />
                     <label for="input-1">Legal</label>
                   </td>
                 </tr>
               </tbody>
             </table>

我已经尝试了这一点，但它只能选择一个表格行作为单选按钮。

.category-item input{
display: none;
}


.category-item label{
cursor: pointer;
padding: 30px;
}

如何使每个td充当单选按钮，tr标签将块分开，因此所有元素都不是单选按钮。

Answer 1

您所做的错误是您对所有输入使用相同的id，这是完全错误的，因为id s始终是唯一的，这意味着只有一个元素将使用相同的id {1}}。

然后您将如何确定哪个radio是checked，因为您正在隐藏收音机？

为此，您可以使用伪元素 :checked来设置选中radio的样式，例如您可以更改已选中收音机的背景颜色。

这是一个JSfiddle，希望这有帮助。

Answer 2

您必须使用唯一ID作为输入，或者不要使用ID并在标签中设置输入，如此

<label><input type="radio" name="list" value="" /> Label Title</label>

这是一个CodePen，希望这有帮助。

Answer 3

感谢My Post上的 zer00ne

＆＃13;

＆＃13;

class FindKey

{
    public int search(String[][] student, String searchKey) {
    int search = 0;
    int column = student.length;
    int row = student[1].length;
    for (int i = 0; i < column; i++) {
        for (int j = 0; j < row; j++) {
            if ((student[i][j]).equals(searchKey)){
               System.out.println(j);
               return j;
            }


        }
    }
    return -1;
}

public static void main(String[] args) {
    FindKey search = new FindKey();
    String[][] book ={{"1", "2"} , {"2", "4"}} ;
    search.search(book, "2");

}
}

＆＃13;

/* Radio Buttons & Labels */


/* :checked & for='ID OF RADIO' */

.rad {
  display: none
}

.lab {
  border-radius: 9px;
  border: 2px inset grey;
  padding: 3px 5px;
  font-size: 24px;
  cursor: pointer;
  margin: 20px 10px;
}

.lab::before {
  content: 'WHITE';
}

.rad:checked+.lab {
  background: red;
  color: white;
}

.rad:checked+.lab::before {
  content: '\a0\a0RED\a0\a0';
}


/* Anchor & Any Element */


/* href='#ID OF ELEMENT' &  #ANY:target */

a {
  display: inline-block;
  margin: 0 5px;
  color: yellow;
  background: #000;
  padding: 2px 4px;
}

a:first-of-type {
  color: #ff4c4c
}

a:nth-of-type {
  color: yellow
}

a:last-of-type {
  color: lime
}

b {
  display: block;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  margin: 5px auto;
  border: 3px outset grey;
  background: rgba(0, 0, 0, .2)
}

#T1:target {
  background: red;
}

#T2:target {
  background: yellow
}

#T3:target {
  background: green
}

＆＃13;

＆＃13;

＆＃13;