Блог

У меня есть таблица, в которой мне нужны вложенные переключатели, и я могу выбрать только один из них, поэтому для этой цели у меня есть

HTML

 <table>
    <tbody>
        <tr *ngFor="let item of [1,2,3,4]; let i = index">
            <td>
                <input type="radio" name="ritemb" />
            </td>
            <td>
                Name
            </td>
        </tr>
    </tbody>
</table>

 

CSS

 table {
    border: 1px solid black;
    width: 300px;
}
 

и это работает.

Но мне нужно изменить цвет выбранных переключателей, поэтому я погуглил и нашел это решение

HTML

 
<table>
    <tbody>
        <tr *ngFor="let item of [1,2,3,4]; let i = index">
            <td>
                <div class="radio-item">
                    <input type="radio" id="ritemb" name="ritem" value="ropt2">
                    <label for="ritemb">Option 2</label>
                </div>
            </td>
            <td>
                Name
            </td>
        </tr>
    </tbody>
</table>
 

CSS

 
table {
    border: 1px solid black;
    width: 300px;
}


.radio-item {
    display: inline-block;
    position: relative;
    padding: 0 6px;
    margin: 10px 0 0;
  }
  
  .radio-item input[type='radio'] {
    display: none;
  }
  
  .radio-item label {
    color: #666;
    font-weight: normal;
  }
  
  .radio-item label:before {
    content: " ";
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    border: 2px solid #004c97;
    background-color: transparent;
  }
  
  .radio-item input[type=radio]:checked   label:after {
    border-radius: 11px;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 9px;
    left: 10px;
    content: " ";
    display: block;
    background: red;
  }
 

но теперь, когда я нажимаю на последние кнопки adio, первый переключатель вместо выбранного становится красным. Я полагаю, что проблема в позициях css, но я не могу найти решение

Причина вашей борьбы в том, что вы id не изменились, а также не связаны label с этим . Используя функцию интерполяции от Angular, можно сгенерировать «предсказуемый» id для каждого переключателя.

 <table>
    <tbody>
        <tr *ngFor="let item of [1,2,3,4]; let i = index">
            <td>
                <div class="radio-item">
                    <input type="radio" id="ritemb{{i}}" name="ritem" value="ropt2">
                    <label for="ritemb{{i}}">Option {{i}}</label>
                </div>
            </td>
            <td>
                Name
            </td>
        </tr>
    </tbody>
</table>
 

В соответствии с документацией Mozilla о переключателях:

У каждого из них также есть уникальный идентификатор, который используется атрибутом элемента for для связи меток с переключателями.

С помощью уникального label и id каждого переключателя он должен работать по желанию.