如何在单击时更改动态单选按钮样式
如何在单击时更改动态单选按钮样式
提问于 2018-08-30 10:06:57
我目前正在创建一个使用单选按钮的动态收件日期表单。当用户单击当前选定值时，我想更改它的样式。以下是我不成功的代码：
foreach ($period as $day){
echo '<label class="pickup-date" id="pickupdate"><input type="radio" value="'.$day->format('M-d-Y').'" name="pickup_date">'.$day->format('M') . ' <span>' .$day->format('d') . '</span> '. $day->format('D') .'<br/></label>';
}Css
.pickup-date-tab label.checked{
background: #6d1f89 !important;
color: #fff; } jquery
$('#pickupdate').on('click',function(){
$('#pickupdate').removeClass('checked');
$(this).addClass('checked');
});我的问题是，它只在第一个按钮上起作用。
回答 1
Stack Overflow用户
发布于 2018-08-31 09:07:37
我已经弄明白了，多亏了这个网站。我发现了相关的问题。
我已经将代码更新为
foreach ($period as $day)
{
echo '<label class="pickup-date" id="pickupdate"><input type="radio" value="'.$day->format('M-d-Y').'" name="pickup_date"><div class="highlited">'.$day->format('M') . ' <span>' .$day->format('d') . '</span> '. $day->format('D') .'</div></label>';
}onclick的正确jquery
$(document).on('click','#deliverydate',function(){
$('#pickupdate').removeClass('checked'); // i have removed this line instead I used CSS
$(this).addClass('checked'); // i have removed this line instead I used CSS });Css
.pickup-date input[type=radio]:checked + .highlited{
background: #6d1f89 !important;
color: #fff;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52088288
复制相关文章
相似问题