Кнопки CSS в Loop

Question

У меня этот css используется для переключателей.

input[type=radio]:checked + .selectionName{ 
    border:4px solid #fcaf17; 
} 

Это работало отлично с этим кодом, на мой взгляд:

<label class="option" for="option2" class="col-xs-12 col-sm-12 col-md-12"> 
    <input id="option2" type="radio" name="option" value="Loved Quality of Purchase" /> 
    <div class="selectionName"></div> 
</label> 
<label class="option" for="option3"> 
    <input id="option3" type="radio" name="option" value="Someone solved my Problem" /> 
    <div class="selectionName"></div> 
</label> 
<label class="option" for="option4"> 
    <input id="option4" type="radio" name="option" value="Other" /> 
    <div class="selectionName"></div> 
</label> 

Но он перестал работать, когда я поставил код вида в цикле:

<?php foreach ($options as $option) : ?> 
<label class="option" for="option1"> 
    <input id="option1" type="radio" name="option" value=<?php echo $option['title'] ?> /> 
    <div class="selectionName"><?php echo $option['title']; ?></div> 
</label> 
<?php endforeach; ?> 

В цикле только первая кнопка переключателя является интерактивной и отображает границу.

Некоторые больше кода CSS для радиокнопок:

.option > input[type=radio]{ 
    display:none; 
} 

input[type=radio]{ 
    cursor:pointer; 
    border:4px solid transparent; 
    width: 20px; 
    height: 20px; 
    border: 1px solid black; 
    display: block; 
} 

input[type=radio]:checked + .selectionName{ 
    border:4px solid #fcaf17; 
} 

Как мне это исправить, чтобы работать в цикле

Answer 1

Похоже, что ваша петля foreach производит только кнопки с label id=1. Поскольку идентификатор CSS должен быть уникальным, признается только первый элемент. Попробуйте изменить имя переменной в цикле foreach.

<? var i = 1; ?> 

<?php foreach ($options as $option) : ?> 
<label class="option" for="option + <?php i ?>"> 
    <input id="option + <? i ?>" type="radio" name="option" value=<?php echo $option['title'] ?> /> 
    <div class="selectionName"><?php echo $option['title']; ?></div> 
</label> 
<?php i++ ?> 
<?php endforeach; ?> 

Я не говорю на php, поэтому вам, возможно, придется немного изменить синтаксис.

Answer 2

Я думаю, что у вас есть опечатка:

<input id="option1" type="radio" name="option" value=<?php echo $option['title'] ?>/> 

Должно быть:

<input id="option1" type="radio" name="option" value="<?php echo $option['title'] ?>"/> 

Вам не хватает "".

Надеюсь, это поможет.