循环中的CSS按钮

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 ID需要唯一，所以只识别第一个元素。尝试在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'] ?>"/> 

你错过了“”。

希望这会有所帮助。