Question

我目前正在使用单选按钮创建动态取件日期表格。我想在用户单击它时更改当前选定值的样式。这是我失败的代码：

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');
    });

我的问题是，它只能在第一个按钮上使用。

Answer 1

由于这个网站，我已经知道了。我发现了相关问题。

我已将代码更新为

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;
}

单击时如何更改动态单选按钮样式

1 个答案: