我将此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;
}
如何解决此问题以在循环中工作
答案 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,所以你可能需要稍微改变一下语法。