我目前正在创建一个使用单选按钮的动态收件日期表单。当用户单击当前选定值时,我想更改它的样式。以下是我不成功的代码:
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');
});
我的问题是,它只在第一个按钮上起作用。
发布于 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;
}
https://stackoverflow.com/questions/52088288
复制相似问题