循环中的CSS按钮

时间:2014-02-21 18:58:38

标签: php html css loops radio-button

我将此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;
}

如何解决此问题以在循环中工作

2 个答案:

答案 0 :(得分:0)

我认为你有一个错字:

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

应该是:

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

你错过了“”。

希望这有帮助。

答案 1 :(得分:0)

看起来你的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,所以你可能需要稍微改变一下语法。