循环中的 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'] ?>"/>

您缺少“”。

希望这会有所帮助。